前端CSS学习

一、CSS盒子模型

组成

content -> padding -> border -> margin

content：内容区域
是由width和height组成的区域，增加内边距、边框和外边距不会影响内容区域元素框的总尺寸
padding：内边距（内填充）
只写一个值：30px（上下左右）
写两个值：30px 40px（上下、左右）
写三个值：30px 40px 50px（上 左&右 下）
写四个值：30px 40px 50px 60px（上、右、下、左）
也可针对某一遍进行设置，此时只能写一个值：
padding-left padding-right padding-top padding-bottom
border：边框。
给盒子设置边框粗细（border-wieth）、边框样式（border-style）、边框颜色（border-color）等效果。
margin：外边距（外填充）
margin控制元素与元素之间的距离。body的margin比较特殊，控制的是页面与浏览器窗口边距的距离。
用法与padding一样

背景颜色会填充到margin以内的区域
文字在content区域添加
padding不能出现负值，margin可以出现负值（利用margin负值可以做一些复杂的布局效果）

box-sizing 

box-sizing属性可以改变盒子模型的展示形态。
其语法为：box-sizing: content-box（默认值）| border-box
取值：

content-box（标准模式）
盒子总宽度=width+padding+border+margin
border-box（怪异模式）
盒子总宽度=width(包含padding+border)+margin
指盒子设置的宽width高height由content、padding、border三者来分配。
若box-sizing的取值为content-box时，给盒子设置border或padding时，盒子会被撑大，如何不想盒子被撑大，可以采用两种方法：
- 手动内减：自己计算多余的大小，手动在content中减去
- 自动内减：给盒子设置属性box-sizing:border-box，浏览器会自动计算多余的大小，自动在内容中减去

margin叠加（合并现象）

1. 水平布局的盒子，左右margin正常，互不影响。
2. 垂直布局的块级元素，上下的margin会合并。最终两者间的距离为margin的最大值。

margin传递（塌陷现象） 

互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起向下移动。只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
解决方案
给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
给父元素设置overflow:hidden
转换成行内块元素
设置浮动

拓展： 

1. margin自适应
   margin可以左右自适应居中，但上下自适应（目前知识）是不行的
2. 不设置width和height的时候，对盒子模型的影响：
   不设置width时系统会自动去计算容器的大小，且不会超出父容器范围，省去了自己运算的步骤，也节省了代码。

 

二、标签分类

按类型

block：块
例如div、p、ul、li、h1等都属于块，它们具有以下特性：
a) 独占一行
b) 支持CSS所有样式
c) 不设置宽时，宽会和父元素的宽相同
d) 所占区域是一个矩形
inline：内联（行内标签）
例如span、a、em、strong等都属于内联，它们具有以下特性：
a) 挨在一起（和其他元素在一行上）
b) 对元素的高度、宽度及顶部和底部边距设置不生效；完全靠内容撑开宽高
c) 所占区域不一定是矩形
d) 内联标签之间会有空隙，是由写代码时换行产生的，但一般不需要解决这个空隙。

inline-block：内联块（行内块标签）
例如img、input、select等（一般是表单标签），特性如下：
a) 挨在一起
b) 元素的高度、宽度、行高以及顶和底边距都可设置

布局一般用块标签，修饰文本一般用内联标签。 

按显示

1. 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
2. 非替换元素：将内容直接告诉浏览器，将其显示出来

三、显示框类型（display）

display属性规定元素应该生成的框的类型
display: block / inline / inline-block / none
a) inline：默认值，此元素会被显示为内联元素，元素前后没有换行符。
b) block：此元素将显示为块级元素，此元素前后会带有换行符。
c) inline-block：行内块元素
d) none：此元素不会被显示
display: none 表示不占空间的隐藏
visibility: hidden 占空间的隐藏
在html文档中，不建议使用显示框类型，通常使用浮动 float 来实现相同的效果。

四、标签嵌套规范

1. 之前学过的：ul、li； dl、dt、dd； table、tr、td等
2. 块标签可以嵌套内联标签
3. 内联不能嵌套块（但a能嵌套div，好处在于可以给一个区域加链接）
4. 块标签不一定能嵌套块标签，如p标签内不能嵌套div标签

五、overflow溢出隐藏

overflow属性规定溢出部分的显示效果。
溢出部分：指的是盒子内容部分所超出盒子范围的区域。
常见属性值：

visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被隐藏，其余内容是不可见的。
scroll：无论是否溢出，都将会同时显示水平和垂直两个滚动条。
auto：根据是否溢出，自动显示滚动条以查看其余的内容或隐藏滚动条。
overflow还有两个姐妹属性：overflow-x、overflow-y，但很少使用。

六、透明度与手势

透明度

opacity 透明度，是一个属性
a) 取值为 0(透明) ~ 1(不透明)，例如0.5表示半透明
注：当透明度为0时，也占空间
b) 有opacity属性的所有后代元素都会继承 opacity 属性，所以其所有的子内容也会透明
rgba（r, g, b, a），是一个属性值
其中a（alpha）控制透明度，取值同样为0~1，它可以让指定的样式透明，而不影响其他的样式。可用于制作透明的边框、透明背景图片等

手势：cursor 

default：默认，通常是一个箭头。
hand/pointer：手形光标。就像通常用户将光标移到超链接上时那样。
move : 十字箭头光标。用于标示对象可被移动。
help : 带有问号标记的箭头。用于标示有帮助信息存在。
text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
自定义光标：cursor: url(路径), auto。图片类型需要是.cur或.ani格式。

七、最大、最小宽高

min-width、min-height
max-width、max-height
强化对 % 的理解：
a) width和height
它们的百分比计算是基于包裹它的父元素的宽和高来计算（一定是父元素，和它爷爷没关系）
有一种特殊情况是，父元素没有明确的高度定义(指的是不定义height或者使用min/max-height这种，都属于不明确的高度定义)，并且子元素使用百分比并且不是绝对定位，那么这时候的百分比等同于auto。
b) padding和margin
padding和margin都可以使用百分比来定义大小，注意参考的百分比是宽度，而不是高度。（margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度，而是宽度 。）
c) background-position
d) font-size：参考值是它的父元素的font-size
e) line-height：参考的是自身的font-size大小

八、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-decoratio（underline）
 

九、CSS reset（重置样式）

所有的 HTML 标签在没有设置样式时均被浏览器默认的样式列表所装饰 （不同浏览器默认样式有所不同）。CSS 的样式重置就是清除浏览器的默认样式 ，可以理解为对于全局的样式定义。 对于开发者而言，如不重置每一个浏览器特定的默认样式，则会在开发造成诸多的不便。

十、float浮动 

文档流（标准流）

文档流：是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。
常见标准流排版规则

1. 块级元素：从上到下，垂直布局，独占一行
2. 行内元素或行内块元素：从左到右，水平布局，空间不够时自动折行

float特性 

加浮动的元素，会脱离标准文档流（脱标），会沿着父容器靠左或靠右排列（不能上下），如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框独占一行，而不论它本身是何种元素。

float取值 

1. left：元素向左浮动
2. right：元素向右浮动
3. none（默认）：元素不浮动，并会显示在其在文本中出现的位置

float注意点 

只会影响后面的元素，对浮动之前的元素不造成任何影响
内容默认提升半层：浮动的元素有“字围”的效果，可以做一些图文混排效果
默认宽根据内容决定（收缩）：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）
换行排列
主要给块元素添加，但也可以给内联元素添加

清除浮动 

清除浮动的含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准文档流的块级父元素
原因：子元素浮动后脱标–>不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局

 

清除浮动的方法

• 直接设置父元素的高度

• 额外标签法：
  步骤：
  a)在父元素内容的最后添加一个块级元素
  b)给添加的块级元素设置 clear:both
  缺点是会在页面中添加额外的标签，会让页面中的HTML结构变得复杂

• 伪元素清除法

• 双伪元素清除法