CSS知识点

1、margin:盒子与盒子之间的距离

给灰色盒子设置margin时,会吧父级红色盒子带下来,这时要给红色盒子设置值一个边框,使其触发bfc,形成包裹,这时父级就不会被带下来

BFC:块级格式化范围,BFC就像一个页面中容器,包装了后就不会影响到页面其他布局,且这个容器中布局与外面也毫不相干

2、在文字外面套个盒子,再在中盒子外套一个盒子,设置这个盒子的padding值可以达到文字距原来盒子有内边距的效果,如果直接在第一个盒子上设置的话,会改变盒子大小

3、CSS的选择器

(1)通配选择器*(最好 v 不要用)

作用于所有标签,无论标签有没有写,有没有在文档中出现.

(2)标签名选择器

作用于一类标签

使用场景:常用于重置某类标签的样式

(3)群组选择器   选择器1,选择器2,…{ }

p,div{

color:red;

}

(4)类选择器

命名规范:

1、不要以数字开头

2、不要过于简单,要有意义

3、多个单词用下划线连接

4、可以使用多个名字,用空格隔开(可事先设置好某些属性,当该类需要时,直接写到名字种,该类就具有该种属性。

使用场景:用于各种场景,使用最多

(5)后代选择器              选择器1  选择器2 选择器3 … {}      只作用于最后一个选择器,前面的选择器只是过滤条件,帮助定位

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,841评论 1 92
  • 1.<svg> 标签的目的是什么?用可伸缩矢量图来画图或文本 2.要去掉文本超链接的下划线,下列正确的是:a{ t...
    开心糖果的夏天阅读 688评论 0 1
  • 1.有关html Doctype的描述: 它的责任就是告诉浏览器文档使用哪种html或者xhtml规范;不同文档模...
    开心糖果的夏天阅读 2,148评论 0 2
  • 1、图片的处理 当一个网页有大量图片要加载时,可以对图片进行压缩,或者采用Js异步处理,让一部分图片先加载,鼠标滑...
    2dcc2b155e1e阅读 319评论 1 1
  • CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内...
    hmj1993阅读 458评论 0 1