2021-07-30

偷学web前端之html+css（第五天）

一个大 div 嵌套一个小的 div，让小的 div 水平居中，并且小的 div 不随着浏览器的窗口的大小的改变而改变：先给大的 div 设置定高，不要设置宽，再给小的 div 设置高，高和大的 div 高度相等，然后设置定宽，最后在小的 div 设置 margin：0 auto；即可（auto 意思是自适应）

html 代码： 
 <div class="wrapper"> 
 <div class="box"></div> 
</div> 
css 代码: 
*{ 
 margin: 0; 
 padding: 0; } 
.wrapper { 
 height: 100px; 
 background-color: #123; } 
.box { 
 width: 1200px; 
 height: 100px; 
 background-color: #00f; 
 margin: 0 auto; }
 

效果：
当窗口缩小的时候,只有黑的会变短,蓝的永远不变而且处于居中状态。这就是利用margin：0 auto 来实现的，但是两个必须都得是块级元素。

行级元素和行级块元素都是文本类元素（带有 inline 的元素），文本类元素会受到文本分隔符的影响（只要有空格或者回车都会空一格，就是之前讲的，图片中间有空隙，和这个是一样的）

文本类元素和文本类元素会底对齐，但是一旦文本类元素里边包含文字了，外边的文字就会和里边的文字底对齐，可以用 vertical-align：（填数字）px 调整对齐，他还有一个默认的值 middle 是中对齐。

行级元素的 padding-top、padding-bottom、margin-top、margin-bottom 属性设置是无效的。

---

练习 1：（阿里笔试题）内核为 webkit 的浏览器包括：
A：IE B：Firefox C：Chrome D：Safari E：opera7（较老版本） 
解析：选 CD，opera7 的较老版本是最经典的版本，新版的 opera 用的也是
 webkit。
 练习 2：（阿里笔试题）下列哪些属于 HTML 单标签？
A:<br> B:<hr> C:<command> D:<meta> 
解析：选择 ABD，C 是 h5 的标签，后期会讲的。

以上五天的内容就是html+css的了