【前端基础--2】

选择器优先级

style标签中：

        .text{color: pink;}div{color: red;}#box{color: skyblue;}

body标签中：

    <div class="text" id="box">猜猜我是什么颜色的</div>

运行结果：

选择器优先级权重：

id选择器 > 类名选择器 > 标签名 > 通配符 > 继承（子级默认继承父级）

id选择器 > 后代选择器(类名+标签名  .text p)> 类名选择器 > 标签名 

同级下，按照就近原则

抽象来讲：

进行叠加：id(100)   类名(10)   标签(1)   通配符(0.1)    后代选择器(10+1)

---

盒模型

看成一个矩形的盒子

盒模型组成

• 内容区域    content
• 内边距       padding
• 边框          border
• 外边距     margin

盒模型属性的运用

1.内容   content (width+height)

块级元素：div  ul  li  p  h1~h6等。在不限定高宽的情况下默认是文字大小决定的高度和与浏览器长度相等的宽度。

行内标签：span  a  b  i  em  strong等。这些标签不支持自定义高宽，高宽都是依据文字的。

---

内边距padding

会扩展盒子的大小

两个值写法：（上下都是10，左右是20）

padding：10px  20px；

三个值写法：（上10，左右各20，下30）

padding：10px  20px  30px；

四个值写法：（上10，右20，下30，左40）

padding：10px  20px  30px  40px；

单个写法：

顶部内边距：padding-top：10px；

底部内边距：padding-bottom：10px；

左边内边距：padding-left：10px；

右边内边距：padding-right：10px；

---

边框border

会扩展盒子大小

border:10px  solid  red;         (一个红色的实线边框)

border：边框大小  边框风格 边框颜色       

分解写法：

border-width:10px;

border-style:solid;  

border-color:pink;

顶部边框：border-top:5px solid red;                  (实线)

底部边框：border-bottom:5px dashed pink;     （虚线)

左侧边框：border-left:5px dotted skyblue;          (点状线）

右侧边框：boeder-right:5px double green;          (双边线)

边框单独设置：border-top-width:5px;

---

外边距margin

不会改变盒子大小，会控制该盒子与浏览器边框或与其他盒子的距离

margin:20px;

单个写法：    （常用）

margin-top:10px;

margin-left:10px;

margin:auto;     (左右自适应居中）

两个值写法：（上下都是10，左右是20）

margin：10px  20px；

三个值写法：（上10，左右各20，下30）

margin：10px  20px  30px；

四个值写法：（上10，右20，下30，左40）

margin：10px  20px  30px  40px；

---

盒子的合并

父子盒子外边距合并： 若想让两个盒子之间有距离的概念，可以给父盒子添加一个支撑点（内边距或边框）。

兄弟外边框合并：两个盒子的外边距会重叠，添加一个行内块属性就可以解决这个问题了。（display:inline-block;)

---

标准盒模型

box-sizing:content-box;

宽度: 240     内容宽度: 200 + 左右内边距: 20 + 左右边框: 20

高度: 240     内容高度: 200 + 上下内边距: 20 + 上下边框: 20

怪异盒模型 

box-sizing:border-box;

内容宽度: 200     被缩减后的内容宽度: 160 + 左右内边距: 20 + 左右边框: 20

内容高度: 200     被缩减后的内容高度: 160 + 上下内边距: 20 + 上下边框: 20

不改变盒子总大小，但是要添加边框和内边距，就使用怪异盒模型。

---

溢出隐藏属性

内容超出盒子也正常显示

overflow: visible;

溢出隐藏

overflow: hidden;

内容不论会不会超过盒子都会出现滚动条

overflow: scroll;

内容不超过盒子时就不会出现滚动条了

overflow:auto;

清除默认样式

第一种写法：通配符*清除默认样式写法

        *{/* 外边距 */margin: 0px;/* 内边距 */padding: 0px;/* 清除边框 */border: none;/* 清除默认自带黑点 */list-style: none;}

第二种写法：重置

        body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}ol,ul{margin: 0;padding: 0;list-style: none;}img{border: none;}a{text-decoration: none;color: black;}

第三种，新建一个css文件，将上面的代码进行引入。

---

元素类型

常用元素类型：块级元素、行内元素、行内块元素

---

块级元素

display: block;

块级标签：div  p  h1~h6  li  ol  ul  dl dt dd  hr(分隔符)等

特征：

• 独占一行，不会共享一行
• 若不设置宽度，默认和浏览器宽度相同或继承父级宽度
• 若不设置高度，默认和文字高度相同
• 支持auto自适应居中  可以自定义高宽 设置内外边距

---

行内元素

display: inline;

行内标签：span  a  strong  i  em  del等

特征：

• 不能自定义高宽   默认都是0 ，靠文字内容增大
• 不会独占一行     可以横排显示
• 不支持auto自适应居中，不支持上下外边距（左右可以）

---

行内块元素

display: inline-block;

行内块标签：img  input

特征：

• 可以横排显示，不会独占一行（具有行内元素的特征）
• 支持高宽属性设置（具有块级元素特征）
• 不支持auto自适应居中   支持上下左右外边距设置

---

行内块和行内元素间空格：

浏览器在解析代码的时候依据行内块和行内标签之间的换行和多个空格会自动显示一个空格。

解决方法：

1. 让两个标签之间不换行，补空格（但不利于维护）
2. 父级标签在style中设置font-size: 0px; ，但文字标签要重新定义
3. 不使用行内块来做横向布局 （可以用浮动来替换它）

---

display

定义元素是什么类型

1. display: block;
2. display: inline;
3. display: inline-block;
4. display:none;   (不会在页面中显示这个元素)

 所以使用这个display，就可以使div块级元素变为行内块元素，可以在同一行显示了。

但是可能会造成穿插现象，对不齐。

就需要vertical-align: top;这个语句让它们在顶部基线对齐