CSS三大特性&盒子模型

CSS三大特性

css,层叠样式表

1.CSS层叠性

作用:层叠性就是CSS处理冲突的一种能力

注意点

层叠性只有在多个选择器中选中“同一个标签”,然后又设置了“相同的属性”,才会发生层叠性

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

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

2.CSS继承性
子类可以继承父类元素的属性
适当使用,不可滥用,好处减低了css的复杂度,子元素可以继承父元素的样式(color,text-,font-,line-)

3.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)组成。

盒子边框(border)

盒子应用于ie6以上

语法:

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 


## 圆角边框

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

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:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

外边距实现盒子居中

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

  1. 必须是块级元素。
  2. 盒子必须指定了宽度(width)

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

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

  1. 文字水平居中是 text-align: center

  2. 盒子水平居中 左右margin 改为 auto

  3. 插入图片 我们用的最多 比如产品展示类

  4. 背景图片我们一般用于小图标背景 或者 超大背景图片

    ​ background-position: center center;

    清除元素的默认内外边距

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

外边距合并

外边距塌陷:

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

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

div:first-child {
margin-bottom: 100px;
}
div:last-child {
margin-top: 50px;
}
这时候两个DIV垂直间距为100 取较大值

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

	.father {
		width: 300px;
		height: 300px;
		background-color: pink;
		margin-top: 100px;
		/*border: 1px solid pink;第一种解决方案,就是给父元素加上边框*/
		/*padding-top: 1px; 第二种解决方案,给父元素加上内上边距*/
		overflow: hidden; 第三种,给父元素添加overflow属性
	}

	.son {
		width: 50px;
		height: 20px;
		background: red;
		margin-top: 30px;
		overflow: hidden;
	}

div class=“father”
div class=“son”>11111111111111111111111111111111112 /div
/div

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值