第三课 css样式的学习

CSS样式的学习

---

文档流

网页是一个多层结构，文档流就是一个网页的最底层,是网页的基础，我们创建的元素默认在文档流上。

元素在文档流上有什么特点

块元素：

1. 独占一行
2. 默认宽度是父元素的全部
3. 默认高度由内容撑开，子元素决定

行内元素

1. 不会独占一行，自左向右水平排列
2. 如果一行中无法容纳所有行内元素，自动换至下一行排列
3. 长度和宽度默认由内容撑开

盒子模型

​ 具体不细记录

1. 设置边框，至少设置3个样式

   边框的宽度：border-width

   ​ -可以用来指定四个方向的宽度，四个值 上 右 下 左，例如border-width: 10px 20px 30px 40px.三个值 上 左右 下。也可以用border-top(…)-width等，颜色，样式也有。影响盒子大小

   ​

   边框的颜色：border-color

    -也可以指定四个方向颜色，语法和width相同
   

   边框的样式：border-style

   ​ -solid 实线

   ​ -dotted 点状虚线

   ​ -dashed 虚线

   当然了，被网课老师耍了，可以用简写属性直接设置,且无顺序要求

   border: 10px orange solid

   border-top(bottom,left,right):只为一条边设置

2. 内边距

   padding:10px 10px 10px 10px设置方式与width相同，影响盒子大小

3. 外边距

   盒子与其他盒子的距离，不影响盒子本身大小。

   margin-top,margin-left (挤自己，top正值往下走，负值往下走) margin-bottom(济别人) margin-right（默认情况下没用）

   简写 margin:上 右 下 左

盒子的布局

1. 元素在其父元素中的水平布局：

   margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区width

   若等式不成立，则自动调整margin-right使之成立但如果某个值设为auto则会调整auto的值使等式成立。如果将宽度和1个外边距设为auto,则宽度尽量大，外边距为0.另外固定宽度，把margin-left,margin-right设为auto,则可实现元素在其父元素中水平居中。

2. 垂直布局

   若内容超过内容区大小，可对父元素设置overflow属性来解决，默认visible,滚轮：scroll,根据需要生成滚动条：auto.还有overflow-x,overflow-y.

3. 外边距的折叠

   相邻垂直方向外边距会出现重叠现象。兄弟外边距重叠有利于开发。而父子外边距重叠不利于布局。利用调整尺寸法可以暂时解决，但不好，以后再学。

4. 行内元素盒子模型

   -不支持设定宽度和高度

   -可以设置padding，border,margin，垂直方向padding…不影响布局

   -display属性:用来设置元素显示类型。

   ​ -inline:设置为行内元素。

   ​ -block:设置为块元素。

   ​ -inline-block:行内块元素，可以设置宽度和高度，且不会独占一行。（少用）

   ​ -table：把元素设置为一个表格

   ​ -none：元素不在页面中显示

盒子大小

boxsizing属性默认为content-box:height,width设定内容区大小

​ 设为border-box:height,width设定为整个盒子大小

轮廓和圆角

outline:设置元素轮廓线，用法和border一样，可能在hover时使用

box-shadow：box-shadow:10px 10px 50px red;左侧偏移量 下移偏移量 阴影模糊半径 阴影颜色(一般用rgba设置透明度)

border-radius:设置圆角，也可单独设定如border-top-left-radius左上。可以指定两个值50px,50px水平半径，垂直半径椭圆角。也可以直接指定四个圆角：左上 右上 右下 左下。

​

浏览器的默认样式

可以通过检查确定浏览器默认样式并做对应的消除

通过ul中的list-style:none去掉开头的点

比较简单的去除方法：

*{

margin:0;

padding:0;

}

当然找网上的重置样式表就可以了。

text-decoration:none;去除超链接下划线