CSS 盒子模型(Box Model)和一些常用样式

最新推荐文章于 2024-10-10 21:20:12 发布

lihan_freak

最新推荐文章于 2024-10-10 21:20:12 发布

阅读量1.1w

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/jlihan/article/details/140988649

版权

所有HTML元素都可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

一、盒子的类型

浏览器一般初始设置

* {
    padding: 0;
    margin: 0;
}

1、块级盒子（标签，元素）

特点：独占一行，对宽度高度支持

是块级盒子的标签有 div ul li h1~h6 等

设置成块级盒子命令为：display: block;

/* 变为块级盒子 */
/* body {
    
    display: block;
} */

2、内联级盒子

特点：不独占一行，对宽度高度不支持

是内联级盒子的标签有 span a 等

设置内联级盒子命令为：display: inline;

/* 变为内联级盒子 */
/* body {
    
    display: inline;
} */

3、内联块级盒子

特点：不独占一行，对宽度高度支持

是内联块级盒子的标签有 img input 等

设置内联块级盒子命令为：display: inline-block;

/* 变为内联块级盒子 */
/* body {
    
    display: inline-block;
} */

4、弹性盒子

特点：不论父级能不能放下子元素，子元素始终横向布局

设置成块级盒子命令为：display: flex;

/* 变为弹性盒子 */
/* body {
    
    display: flex;
} */

二、盒子的组成

由里到外分别为内容区、填充区、边框区、外边距区。

1、内容区

/* 内容区
    width: 200px;
    height: 100px;
    box-sizing: content-box默认宽高针对内容区设置
    box-sizing: border-box宽高针对整个盒子设置
*/

2、填充区

/* 填充区
    从上开始，顺时针进行旋转，不够了找对称
    padding: 50px;   上下左右填充50px
    padding: 50px 20px;   上下50px 左右20px
    padding: 50px 20px 10px;    上50px 左右20px 下10px
    padding: 50px 20px 10px 5px;    上50px 右20px 下10px 左5px
    结合上下左右单独对某一个方向进行设置
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 30px;
    padding-bottom: 40px;
*/

3、边框区

/* 边框区
    border 复合属性
    border-style:边框样式 solid 实线 dashed 虚线 dashed 圆点虚线
    border-color:边框颜色
    border-width:边框宽度
    border: solid 10px blue:值不区分顺序 空格隔开 可结合上下左右四个方向单独设置
    border-top: dashed 10px pink;
    border-left: dashed 10px pink;
    border-right: dashed 10px pink;
    border-bottom: dashed 10px pink;
    三个方面，四个方向，十二种情况
    border-top-color: aqua;
    border-top-width: 10px;......
*/

4、外边距区

外边距
    从上开始，顺时针进行旋转，不够了找对称
    margin: 20px;
    margin: 50px 20px;
    margin: 50px 20px 10px;
    margin: 50px 20px 10px 0;
    结合上下左右四个方向单独设置
    margin-top: 50px;
    margin-left: 100px;
    margin-right: 10px;
    margin-bottom: 30px;
    margin: 10px auto; auto 水平方向上居中 用于块级元素

三、常用样式

1、保持图片不变形

object-fit: cover;

2、加阴影

/* 
    阴影box-shadow 水平 垂直 模糊度 颜色 
*/

3、圆角边框

/* 边框  border-radius 圆角边框*/

4、列表相关

/* 列表相关  list-style: none; 列表样式去掉*/

四、背景相关样式

background 复合属性

    1、background-color设置背景颜色
    2、background-image 设置背景图片 url函数指定图片地址  绝对地址，相对地址
    3、background-repeat 设置背景图片是否平铺 repeat平铺 no-repeat不平铺 repeat-x x轴平铺 repeat-y y轴平铺
    4、background-size 设置背景图片大小 cover把所在的容器铺满
    5、background-position 设置背景图片位置 center居中
    6、background-attachment: fixed; 设置背景图片不随浏览器的滚动而滚动

五、字体相关样式

    1、字体颜色 color
    2、font 复合属性
        font-size:  设置字体大小
        font-weight: 设置字体粗细 
        font-style: 设置字体的风格 normal正常 italic 斜体
    3、text-decoration: 设置文字是否有修饰线  none无修饰  underline 下划线  line-through 中划线 overline 上划线
    4、text-align: 规定文本的水平对齐方式 left左边 right右边 center居中
    5、line-height: 设置行高

六、颜色的表示方式


    1、用颜色名表示 red pink yellow
    2、六位十六进制的数值表示颜色 0~f    红光  绿光  蓝光
        00~ff
    3、rgb(red,green,blue) 0~255
    4、rgba(red,green,blue,alpha)  a 0~1 指针对背景颜色设置透明度
    5、透明度 opacity 对于整个元素的透明度设置
    6、颜色渐变 linear-gradient(方向,颜色,颜色....)
    7、透明色 transparent