码迷,mamicode.com
首页 > 其他好文 > 详细

优先级啊~

时间:2018-04-21 14:23:07      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:属性   imp   hit   display   传递   lock   style   用户体验   pac   

优先级第三种比较方法

3,比较源次序:最后出现的声明胜出,其他的全部淘汰

该规则的实际应用:

 css Reset代码前置
 a元素的伪类书写顺序

继承

继承是指子元素会自动拥有父元素的某些css属性

 某些css属性:并不是所有css属性都可以被子元素继承
 继承是自动发生的,开发者不需要书写任何额外的代码

可被继承的属性:(文本内属性,都可以继承)

 color
 font-size
 font-weight(取值范围:1,数值(字):100-500;500-700;700-900;2,关键词)
 text-align

不可被继承的属性:

 background-color

一,继承须有传递性

有些属性在页面的某个区域中具有通用性

若没有继承,则必须为该区域的每个元素指定样式,导致代码重复臃肿

二,继承发生的场景

一个元素的某个css属性只有满足下面两个条件,才会继承父元素

 该属性是可继承的属性
 该属性在样式表中没有声明

强制继承

强制继承也叫做显示继承,是指将css属性值设置为inherit

 提示:结构元素包含其它标签(元素)
 不要用文本类元素嵌套其它标签和元素

盒模型概述

盒子的分类:不同的元素产生的盒子类型可能不同

一个元素产生什么样的盒子,取决于它css的display属性

 属性:display
 是否能继承:否
 默认值:inline
 display:block块盒
 display:none不生成盒子(不占用页面空间)
 display:inline行盒
 inline-block行内块
 块盒套行盒,行盒不能套块盒

盒子的组成

一个盒子由:margin,border,padding,content组成

margin:外边距(与其他盒子之间的距离)

border:边框

padding:内边距

content:内容(内容的宽度和高度);用于存放文本或其他元素的区域,类似于一个箱子中存放东西的空间

相关css属性

width:

宽度;不可继承,默认值auto(暂认为撑满整个可用区域)

top:上;right:右;bottom:下;left:左

百分比是取父级宽度的百分之多少

overflow:hidden:超出的内容隐藏

注:设置最大最小宽度,高度是为了提高用户体验,保证当前页面的布局

取值范围:

 1个值代表:四个方向
 2个值代表:上下,左右
 3个值代表:上,左右,下
 4个值代表:上,右,下,左

border:分割线内部和外部的界限,由上,右,下,左四个部分组成(类似于箱子壁)

border-style:

 solid:实线
 dashed:虚线
 double:双线
 dotted:点线

transparent:透明色

border粗细取值:

 medium:中等;预设值
 thin:细
 thick:粗

border颜色的默认值是当前标签color的取值

书写格式为:厚度 样式 颜色

否定选择器

格式:

:not(不添加样式的元素)

例子:

nav a:not(:last-child){border-right:1px solid red;}

margin:表示边框和相邻盒子的距离;类似于箱子与箱子之间的距离

margin:边框外

padding:边框内(里)

优先级啊~

标签:属性   imp   hit   display   传递   lock   style   用户体验   pac   

原文地址:https://www.cnblogs.com/tydy9891-/p/8900793.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!