一、盒子模型
(一)CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:margin、border、padding、content(width、height)。
(二)盒子模型分两种:
1.标准盒子模型,模型成员:margin、border、padding、content;content不包含其他成员;
2.怪异盒子模型(IE盒子模型),模型成员:margin、border、padding、content;content包含border和padding;
3.给元素设置box-sizing可改变盒子模型类型:
标准盒子模型:box-sizing:content-box;
怪异盒子模型:box-sizing:border-box;
盒子模型是常见面试题之一。
二、关于css选择器的权重计算艺术
(一)优先级分类
第一优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。
第二优先级:在html中给元素标签加style,即内联样式。该方法会造成css难以管理,尽量少用。
第三优先级:由一个或多个id选择器来定义。例如,#id{margin:0;}会覆盖.classname{margin:3px}。
第四优先级:由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}。
第五优先级:由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px;}。
第六优先级:通配选择器,如*{marigin:6px;}。
(二)权重计算值分级
第一等级:代表内联样式,如style="",权值为 1000。
第二等级:代表id选择器,如#content,权值为100。
第三等级:代表类,伪类和属性选择器,如.content,权值为10。
第四等级:代表标签选择器和伪元素选择器,如div p,权值为1。
如果遇到样式冲突了,你想设置的样式不起作用时可以利用上述知识提高优先级,增加其权重。
三、css常见样式属性
height设置高度。
width 设置宽度。
padding 设置内边距可以设置一到四个值,例子如下:
padding:10px;所有四个填充都是10px;padding:10px 5px;上填充和下填充是10p,右填充和左填充是5px;padding:10px 5px 15px;上填充是10px,右填充和左填充是5px,下填充是15px。padding:10px 5px 15px 20px;上填充是10px,右填充是5px,下填充是15px,左填充是 20px。
margin 设置外边距
border 设置边框
color 设置字体颜色
background 设置背景颜色
font-size 设置字体大小
四、详细讲解浮动float跟清除浮动
块级元素较霸道,独占一行,假设需要多个块级元素占一行就需要浮动。浮动是脱离文档流,并没有脱离文本流。
(一)设置浮动布局,float的属性有:
left 元素向左浮动。right元素向右浮动。none默认值。元素不浮动,并会显示在其在文本中出现的位置。inherit 规定应该从父元素继承 float 属性的值(这种情况一般可忽略)。
(二)清除浮动的方法:
在父元素上设置overflow:hidden。在父元素上设置伪类,属性设置为content: "";display: block;clear: both。使用空标签设置 clear:both。
example:
工作中常见问题之一。