100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 房子装修工程师CSS(一)之盒子模型/选择器的权重计算/常见样式属性/浮动float

房子装修工程师CSS(一)之盒子模型/选择器的权重计算/常见样式属性/浮动float

时间:2022-03-14 17:04:29

相关推荐

房子装修工程师CSS(一)之盒子模型/选择器的权重计算/常见样式属性/浮动float

一、盒子模型

(一)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:

工作中常见问题之一。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。