CSS盒子模型-2

目录

一、内联元素的盒子

二、默认样式

三、盒子的大小

四、阴影和圆角

---

一、内联元素的盒子

行内元素的盒子模型
内容区  不能设置宽高，是被内容撑开
内边距   可以设置，但垂直方向不会改变页面的布局，也就是不会挤别人
边框     可以设置，但垂直方向不会改变页面的布局，不会挤别人
外边距    垂直方向不能设置外边距，水平方向可以设置，而且水平方向外边距不会重叠

1、display

用来设置元素显示的类型
可选值：
inline  将元素设置为行内元素
block   将元素设置为块元素
inline-block  行内块块元素（即可以设置宽高，又不会独占一行）
table   将元素设置为一个表格
none    元素不在页面中显示（隐藏一个元素）

2、visibility

用来设置元素的显示状态
可选值：
visible 默认值  元素在页面中正常显示
hidden  元素不在页面中显示（隐藏一个元素），位置依然保留

面试题：隐藏元素有几种方式，几者区别是什么
1.display：none；   删除了元素，元素位置不保留
2.visibility：hidden；  元素位置保留
3.将元素变为透明     元素位置保留

二、默认样式

方式1：默认样式：

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding等等
而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认样式都去除

* {
   margin: 0;
   padding: 0;
   list-style: none;
   text-decoration: none;
}

方式2：重置样式表

专门用来对浏览器的样式进行重置
注意：
1、引入reset.css文件，前提是这个文件要有
2、引入reset.css文件一定是在你写的样式之前引入

<link rel="stylesheet" href="./reset.css" />

三、盒子的大小

box-sizing

用来设置盒子尺寸的计算方式   width/height 指的是谁
可选值：
content-box 内容区 默认值
border-box  宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区

.box {
        width: 100px;
        height: 100px;
        background-color: red;
        box-sizing: border-box;
      }

四、阴影和圆角

1、box-shadow

用来设置元素的阴影效果，不会影响到页面布局 
第一个值：水平偏移量  正->左  负->右 ，必选
第二个值：垂直偏移量  正->下  负->上 ，必选
第三个值：模糊半径  默认0px，可选
第四个值：颜色     默认是黑色，可选

.box1 {
        width: 200px;
        height: 200px;
        background-color: #f60;
        margin: 0 auto;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
      }

2、border-radius

 border-radius用来设置圆角  以10px为半径画圆

borde-top-right-radius：设置盒子右上方的圆角
border-top-left-radius：设置盒子左上方的圆角
border-bottom-left-radius：设置盒子左下方的圆角
border-bottom-right-radius：设置盒子右下方的圆角

补充：border-radius: 50%;  设置圆形

.box2 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
      }