首页 > 其他分享> 文章详细

工学结合2019/9/17

2019-09-17 21:08:29 阅读：280 来源： 互联网

标签：元素盒子 17 样式工学边框 2019 外边 border

CSS 三大特性

css，层叠样式表

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

1.样式冲突，遵循的原则时就近原则

2.样式不冲突，不会层叠

CSS继承性子承父业

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

适当使用，不可滥用，好处减低了css的复杂度，子元素可以继承父元素的哪些样式(color,text-,font-,line-)

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

继承样式的权重为0，即在嵌套结构中，不管父元素的权重多大，被子元素继承是，权重都为0.

行内样式优先。行内样式权重相当高

权重相同时，层叠行，就近原则

css有一个命令 !important  优先级最大

CSS的特殊性(Specificity)

关于css 的权重，我们需要一套公式，就叫CSS的特殊性(Specificity)，我们称之为css特性或非凡性

css特性有四个数字组成，从左到右，左边最大，数位没有进制，级别之间不可超越

继承的贡献值	0，0，0，0
每个元素贡献值	0，0，0，1
每个类，伪类	0，0，1，0
每个id	0，1，0，0
行内样式	1，0，0，0
！important	无穷大

div ul li	0003
.nav ul li	0012
a:hover	0011
.nav a	0011
#nav p	0101

1.数位之间没有进制，0005+0005=00010，
2.继承的权重为0

总结优先级
	1.!important
	2.行内样式
	3.id选择器
	4.类选择器，属性选择器，伪元素，伪类
	5.元素选择器
	6.通配符选择
	7.同一类选择就近原则
	
权重是优先级的算法，层叠是优先级的表现

盒子模型（CSS重点）

css三大模块，盒子模型，浮动，定位。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

文字相当于牛奶，把它放进容器，也就我们的盒子。

万物皆是盒子

看透网页布局的本质

CSS 其实没有太多逻辑可言，类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。

盒子模型（Box Model）

。首先，我们来看一张图，来体会下什么是盒子模型。

所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

盒子边框（border）

盒子应用于ie6以上，ie5的略过

语法：

border : border-width || border-style || border-color 
border: 1px solid red;

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

solid

dashed

盒子边框写法总结表


设置内容	样式属性	常用属性值
上边框	border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度样式颜色;
下边框	border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度样式颜色;
左边框	border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度样式颜色;
右边框	border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度样式颜色;
样式综合设置	border-style:上边 [右边下边左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置	border-width:上边 [右边下边左边];	像素值
颜色综合设置	border-color:上边 [右边下边左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度四边样式四边颜色;

border: 1px 2px 3px 3px

表格的细线边框

详见案例

圆角边框(CSS3)

之前的世界只有矩形，学了这个就不只矩形

border-radius(半径): 左上 右上 右下 左下

详见案例

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

值的个数	表达意思
1	上下左右
2	上下左右
3	上左右下
4	上右下左

课堂案例：新浪导航

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

文字盒子居中图片和背景区别

文字水平居中是 text-align: center
盒子水平居中左右margin 改为 auto
插入图片我们用的最多比如产品展示类
背景图片我们一般用于小图标背景或者超大背景图片

background-position: center center;

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，需要清除元素的默认内外边距：

外边距合并

外边距塌陷：

当上下相邻的两个块级元素相遇时，他们之间的垂直间距不是top，bottom的和，而是两者的较大者，相邻块元素的垂直外边距的合并

解决方案：把较大值改成期望的值

嵌套块级元素垂直外边距的合并

下午案例：
在这里插入图片描述

标签：元素,盒子,17,样式,工学,边框,2019,外边,border
来源： https://blog.csdn.net/lk1016596566/article/details/100939447

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9