web前端基础——第三章

三十二、CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性：inherit值）

三十三、CSS优先级

1.相同样式优先级。

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

2.内部样式和外部样式。

内部样式与外部样式的优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

3.单一样式优先级。

style行间 > id > class > tag > * > 继承
  注:
  style行间 权重 1000
      id 权重 100
      class 权重 10
       tag 权重 1

4.!important。

提升样式优先级，非规范方式，不建议使用。（不能针对继承的属性进行优先级的提升）

5.标签+类与单类。

标签+类 > 单类

6.群组优先级。

群组选择器与单一选择器的优先级相同，靠后写的优先级高。

7.层次优先级。

（1） 权重比较

ul li .box p input{ }  1+1+10+1+1
.hello span #elem{ }  10+1+100

（2）约分比较

ul li .box p input{ }  li p input{ }
.hello span #elem{ }  #elem{ }

三十四、CSS盒子模型

1.组成。

组成 ：content→padding→border→margin
    物品  填充物 包装盒 盒子与盒子之间的间距

    content：内容区域 width和height组成的
    padding：内边距(内填充)
       只写一个值:30px(上下左右)
       写两个值:30px 40px(上下、左右)
       写四个值:30px 40px 50px 60px(上、右、下、左)
     单一样式只能写一个值：
        padding-left
        padding-right
        padding-top
        padding-bottom
    margin：外边距(外填充)
       只写一个值:30px(上下左右)
       写两个值:30px 40px(上下、左右)
       写四个值:30px 40px 50px 60px(上、右、下、左)
     单一样式只能写一个值：
        margin-left
        margin-right
        margin-top
        margin-bottom
  注:1.背景颜色会填充到margin以内的区域。
    2.文字会在content区域。
    3.padding不能出现负值，margin是可以出现负值。

2.box-sizing。

box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）| border-box

盒尺寸 ：可以改变盒子模型的展示形态。
默认值 ：content-box：width、height → content
     border-box：width、height → content padding border
使用的场景 ：
  1.不用再去计算一些值
  2.解决一些100%的问题

3.盒子模型的一些问题。

（1）margin叠加。

当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。

margin叠加问题，出现在上下margin同时存在的时候，会取上下中值较大的作为叠加的值。
解决方案 ：
  1.BFC规范
  2.想办法只给一个元素添加间距。

（2）margin传递。

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。

margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。
解决方案 ：
  1.BFC规范
  2.给父容器加边框
  3.margin换成padding

（3）扩展。

1. margin自适应居中 ：margin左右自适应是可以的，但是上下自适应是不行的。（如果想实现上下自适应的话，需要在后面章节来进行学习）
2. 不设置content的现象 ：width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

三十五、标签分类

1.按类型。

block（块）：div、p、ul、li、h1…
  1.独占一行
  2.支持所有样式
  3.不写宽的时候，跟父元素的宽相同
  4.所占区域是一个矩形
inline（内联）：span、a、em、strong、img…
  1.挨在一起的
  2.有些样式不支持，例如：width、height、margin、padding
  3.不写宽的时候，宽度由内容决定
  4.所占的区域不一定是矩形
  5.内联标签之间会有空隙，原因：换行产生的
inline-block（内联块）：input、select…
  挨在一起，但是支持宽高
注:布局一般用块标签，修饰文本一般用内联标签。

2.按内容。

Flow ：流内容
Metadata ：元数据
Sectioning ：分区
Heading ：标题
Phrasing ：措辞
Embedded ：嵌入的
Interactive ：互动的
（详情：W3C:https://www.w3.org/TR/html5/dom.html）

3.按显示。

替换元素 ：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
  img、input…
非替换元素 ：将内容直接告诉浏览器，将其显示出来。
  div、h1、p…

三十六、显示框类型

display:
    block inline inline-block none…
dispaly:none与visibility:hidden区别：
    display:none  不占空间的隐藏
    visibility:hidden  占空间的隐藏

三十七、标签嵌套规范

ul、li
dl、dt、dd
table、tr、td

1.块标签可以嵌套内联标签。

<div>
	<span></span>
	<a href="#"></a>
</div>

2.块标签不一定能嵌套块标签。

<div>
	<div></div>
</div>

错误的写法 ：

<p>
	<div></div>
</p>

3.内联标签不能嵌套块标签。

注:a标签是一个例外。
错误的写法 ：

<span>
	<div></div>
</span>

特殊 ：
正确的写法：

<a href="#">
	<div></div>
</a>

三十八、溢出隐藏

overflow ：
  visible（默认）
  hidden
  scroll
  auto
  x轴、y轴（overflow-x、overflow-y针对两个轴分别设置）

三十九、透明度与手势

opacity ：0（透明）~1（不透明）
      0.5（半透明）
注:占空间、所有的子内容也会透明。
rgba() ：0~1
注:可以让指定的样式透明，而不影响其他样式。
cursor ：手势
  default：默认箭头
  要实现自定义手势：
    准备图片:.cur、.ico
    cursor:url(./img/cursor.ico),auto;

四十、最大、最小宽高

min-width、max-width
min-height、max-height
注:强化对百分比单位的理解。
%单位 ：换算 → 以父容器的大小进行换算的
一个容器怎么适应屏幕的高 ：容器如height:100%;  body:100%;  html:100%;

html,body{height:100%;}
.container{height:100%;}

四十一、CSS默认样式

有些标签有默认样式，有些标签没有默认样式。

没有默认样式的 ：div、span…
有默认样式的 ：
  body → margin ：8px
  h1 → margin ：上下 21.440px
     font-weight ：bold
  p → margin ：上下 16px
  ul → margin ：上下 16px  padding ：左 40px
     默认点：list-style ：disc
  a → text-decoration：underline;

四十二、CSS reset

点击查看常见的CSS reset
简单的CSS reset ：

1. *{ margin:0; padding:0; }
   优点：不用考虑哪些标签有默认的margin和padding
   缺点：稍微的影响性能
   改：body,p,h1,ul{ margin:0; padding:0; }
2. ul{ list-style:none; }
3. a{ text-decoration:none; color:#999; }
4. img{ display:block }
     问题的现象：图片跟容器底部有一些空隙。
       内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
        基线对齐方式，默认值：vertical-align:baseline
         img{ vertical-align:bottom; }解决方式也是推荐的

写具体页面的时候或一个布局效果的时候：

1. 写结构
2. CSS重置样式
3. 写具体样式

四十三、float浮动

1.文档流。

文档流是文档中可显示对象在排列时所占用的位置。

2.float特性。

加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

3.float取值。

left
right
none（默认）

4.float注意点。

1. 只会影响后面的元素。
2. 内容默认提升半层。
3. 默认宽根据内容决定。
4. 换行排列。
5. 主要给块元素添加，但也可以给内联元素添加。

5.如何清除浮动。

上下排列：clear属性，表示清除浮动的，left、right、both
嵌套排列：
  固定宽高 ：不推荐，不能把高度固定死，不适合做自适应的效果。
  父元素浮动 ：不推荐，因为父容器浮动也会影响到后面的元素。
  overflow ：hidden（BBC规范），如果有子元素想溢出，那么会受到影响。
  display ：inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
  设置空标签 ：不推荐，会多添加一个标签。
  after伪类 ：推荐，是空标签的加强版，目前各大公司的做法。
  （clear属性只会操作块标签，对内联标签不起作用）

---

如何学好web前端

感兴趣,够努力。