H5阶段总结

目录

怪异盒子和标准盒子

一、概念

二、计算方法

Flex布局

一、什么是flex布局？

二、基本概念

三、容器的属性

 CSS选择器

高度塌陷

什么是高度塌陷？

解决方法：

权重问题

表单

CSS中隐藏的几种方式

---

怪异盒子和标准盒子

一、概念

        ①  标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长；

        ②  怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。

二、计算方法

标准盒模型计算方式=width+左右内边距+左右边框+左右外边距

怪异盒模型计算方式=width+左右外边距

Flex布局

一、什么是flex布局？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

二、基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

• flex-direction：决定主轴的方向（即项目的排列方向）。
• flex-wrap：默认情况下，项目都排在一条线（又称”轴线”）上。
• flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content：定义了项目在主轴上的对齐方式。
• align-items：定义项目在交叉轴上如何对齐。
• align-content：定义了多根轴线的对齐方式。

 CSS选择器

1.标签选择器

    语法：标签名{}，eg：h1{}//为所有的h1元素设置样式。

2.ID选择器

    语法：#id名{}//id值唯一不能重复,eg:#top{}//为id为top的元素设置样式。

3.类选择器

    语法：.class{},eg：.box{}//为所有的class值为box的元素设置样式。

4.组选择器

    语法：选择器1，选择器2，选择器N{},eg:#box1,.box2,p{}//为id为box1，class为box2和p的元素共同设置样式。

5、通配符选择器

    语法：*{}，eg：*{font-size：16px}//将整个页面字体大小设为16px。

6.后代选择器

    语法：选择器1选择器2{}，eg：p.aa{}//选中指定祖先元素p的指定后代.aa。

7.子元素选择器

    语法：父元素>子元素{},eg：p>.box{}//选中父元素p的指定子元素.box。注意与后代元素选择器的区别

8.伪类选择器

    伪类可以用来表示一些特殊的状态,如：

    ：link-未访问过的超链接。

    ：visited-已访问过的超链接。

    ：hover-鼠标经过的元素。

    ：active-正在点击的元素。

高度塌陷

什么是高度塌陷？

当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷，称为高度塌陷问题。

父元素高度塌陷后，父元素以下的元素都会向上移动，导致布局混乱，所以我们要解决高度塌陷的问题。

解决方法：

1、给父元素添加声明overflow：hidden

2、在浮动元素下方添加空div，并给元素声明 clear：both

3、万能清除浮动法

4、父元素添加浮动

权重问题

1、相同的权重：以后面出现的选择器为最后规则（比如写了相同的两个样式 #content  h1 {color:red} ）

2、不同的权重，权重值高则生效

3.！important（无限大）>行内样式（权重1000）>id选择器（权重100）>类选择器（10）=伪类选择器（10）=属性选择器（10）>元素选择器（1）>通用选择器（0）>继承的样式>浏览器默认的样式。

4.元素选择器相加永远没有类选择器的权重大。

表单

文本输入框 type="text"

密码输入框 type="password"

单选框 type="radio"

复选框 type="checkbox"

普通按钮 type="button"

placeholder就是用户名密码框未输入内容时,默认显示的灰色文字。

CSS中隐藏的几种方式

1、display:none;

将display的属性改为none可以实现元素的隐藏，元素和盒子模型也不生成，被隐藏的元素不占位置，看不见摸不着，它会导致浏览器的重排和重绘。

2、visibility:hidden;

设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。

3、opacity:0;

将opacity的属性改成0那就是透明度等于0看不见元素，这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。

4、position；

利用定位将元素的top和left值设为足够大的负数，使它移出屏幕在屏幕上看不见。

5、overflow:hidden；

将overflow的属性设置hidden可以实现元素隐藏，但是这个是超出盒子的部分隐藏，有局限性。