CSS选择符及盒模型
一.选择符
1.类型选择符(标签选择符)
特点:能选中当前结构里面(全部同名)标签。
应用:统一某一标签样式时或清除某一标签默认样式时。
2.id选择符
特点:(唯一性!)在同一个页面里面,一个id名只能使用一次。
应用:来划分网页外围结构
3.类选择符(class选择符)
特点:
①:一个元素可以有多个类名,类名可以重复出现 eg:<div class="名称1 名称2 名称3 名称4..."></标签>
②:可以制定一类样式.
4.群组选择符
(以逗号分隔的方式,把多个选择器组成一组,给整组添加样式)
5.包含选择符
( 通过父元素找子元素 ,中间通过空格隔开)
6.通配符
*{ }
(* 选择页面中所有的元素!)
注:写CSS样式的时候,先将*{margin:0;padding:0;}写在样式表里,为了将页面上所有元素的默认外边界和填充都清除。
7.伪类选择符
①初始状态 :link{}
②访问过的状态 :visited{}
③鼠标滑过时的状态 :hover{}
④鼠标按下时的状态 :active{}
细节:a:①②④一般用在超链接上,而③除了可以用在超链接上,还能给其他元素添加
b.当四个超链接伪类选择器联合使用时,必须要遵循书写顺序,正确顺序是①②③④,顺序错误会无效。
二.盒模型
1.padding用法:
①padding是为了调整 子元素 在 父元素里面位置关系。
②padding的特点:padding值会把盒子撑大。如果想让盒子保持原有大小,需要在宽高的基础上减掉padding值。
③padding的取值不能为负。
2.margin的用法:
①margin控制的是 同级元素 之间的位置关系。
②margin不会对盒子本身的宽高造成影响。
③margin可以设置负值。
④margin:0 auto; (让当前元素在父元素里面左右居中。)
margin常出现的bug:
a:当父元素和第一个子元素都没有设置浮动的情况下,如果给第一个子元素添加(margin-top) 会错误的把margin-top加在父元素上面。
b: 上下相邻两个元素之间的margin值,不会叠加,按照最大值去设置。
3.拓展:
盒子在网页真正所占据的空间应为:
宽度:(width + padding-left/right + border-left/right + margin-left/right)
高度:(height+ padding-top/bottom + border-top/bottom + margin-top/bottom)
逆战冲冲冲