前端-CSS基础知识详解（二）

黑马蓝汐发布时间：2021-12-24 01:23:51 ，浏览量：2

每日分享：

不止步

别在该奋斗的年纪选择安逸，不进则退，莫负韶华。

css属性
css元素溢出
css显示特性
盒子模型

一、css属性

可以通过标签给某一段文字里面的一小部分设置其他样式

例：

sssssssaa

这样就可以给aa独立设置样式了

1. 布局常用样式属性

width 设置元素（标签）的宽度，如：width：100px;
height 设置元素（标签）的高度，如：height：200px;
background 设置元素背景色或背景图片，如：background：red; 设置元素背景色，background：url（“1.jpg”）; 设置元素背景图片
border 设置元素四周的边框，如：border：1px solid black；设置元素四周边框是1像素宽的黑色实线
以上也可以对每个边分别设置边框：
border-top 设置上边框，如：border-top：1px solid red；
border-left 设置左边框，如：border-left：1px solid green；
border-right 设置有边框，如：border-right：1px solid blue；
border-bottom 设置下边框，如：border-bottom：2px dashed pink；
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如：padding：20px；padding是同时设置四个边的，也可以分别设置每个边：padding-top、padding-left、padding-right、padding-bottom
margin 设置元素和外界的距离，也叫外边距，如margin：20px；margin也是同时设置四个边的，也可以分别设置每个边：margin-top、margin-left、margin-right、margin-bottom
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float：left；和右浮动：float：right

布局常用样式属性简单应用：




    
    
    
    Document
    
        .box1{
            width: 200px;
            height: 200px;
            background: yellow;
            border: 1px solid black;
        }
        .box2{
            /* 设置宽度 */
            width: 100px;
            /* 设置高度 */
            height: 100px;
            /* 设置背景颜色 */
            background: red;
            /* 设置上边框 粗细 线条 颜色*/
            border-top: 10px solid black;
            /* 设置左边框 */
            border-left: 10px solid black;
            /* 设置右边框 */
            border-right: 10px solid black;
            /* 设置下边框 */
            border-bottom: 10px solid black;
            /* 设置内边距 内容到边框的距离 */
            padding-left: 10px;
            padding-top: 10px;
            /* 设置外边距 上右下左 */
            margin: 10px;
            /* 设置浮动 可以利用浮动把块元素放在一行，并且可以设置其宽高 */
            float: left;
        }
        .box3{
            width: 48px;
            height: 48px;
            background: pink;
            border: 1px solid black;
            float: left;
        }

结果：

2. 文本常用样式属性

color 设置文字颜色，如：color：red；
font-size 设置文字大小，如：font-size:12px；
font-family 设置文字的字体，如：font-family：‘微软雅黑’；为了避免中文字不兼容，一般写成：font-family：‘Microsoft Yahei’；
font-weight 设置文字是否加粗，如：font-weight：bold；设置加粗 font-weight：normal 设置不加粗
line-height 设置文字的行高，如：line-height：30px，表示文字高度加上文字上下间距一共是30px（可以通过设置行高来让文字垂直居中）
text-align 设置文字水平对齐方式，如：text-align: center 设置文字水平居中
text-decoration 设置文字的下划线，如：text-decoration：none；去掉文字的下划线；text-decoration：underline；设置下划线；text-decoration：line-through；设置删除线；text-decoration：overline；设置上划线
text-indent 设置文字首行缩进，如：text-indent：30px；设置文字首行缩进30px

文本常用样式属性简单应用：




    
    
    
    Document
    
        p{
            /* 字体大小 */
            font-size: 20px;
            /* 字体样式 */
            font-family:'Courier New', Courier, monospace;
            /* 字体加粗 */
            font-weight: bold;
            /* 字体颜色 */
            color: black;
            /* 文本装饰 加下划线 */
            text-decoration: underline;
            /* 行高 */
            line-height: 100px;
            /* 背景颜色 */
            background: blue;
            /* 文字居中 */
            text-align: center;
            /* 首行缩进 */
            text-indent: 40px;
        }

        a{
            /* 去掉下划线 默认有下划线 */
            text-decoration: none;
        }
    


    链接标签
    
        hello!

结果：

二、css元素溢出

当子元素（标签）的尺寸超过父元素（标签）的尺寸时，此时需要设置父元素显示溢出的子元素的方式，通过overflow属性设置

overflow的设置项：

visible 默认值，显示子元素溢出部分
hidden 隐藏子元素溢出部分
auto 如果子元素溢出，则可以滚动查看其余内容

一般来说，我们会经常使用overflow：hidden；来解决元素溢出

当子元素比父元素大时，默认超出部分会显示：

对父元素设置overflow：hidden；之后会隐藏溢出的部分：

对父元素设置overflow：auto；之后可以通过滑动看到溢出部分：

代码：




    
    
    
    Document
    
        .father{
            width: 100px;
            height: 100px;
            background-color: red;
            overflow: auto;
        }
        .son{
            width: 150px;
            height: 50px;
            background-color: blue;
        }

三、css显示特性

display 属性是用来设置元素的类型及隐藏的，其属性有：