CSS-常见属性

最新推荐文章于 2024-06-27 23:28:24 发布
liyang199103031
最新推荐文章于 2024-06-27 23:28:24 发布
阅读量155
点赞数
文章标签： css css3 html
本文链接：https://blog.csdn.net/liyang199103031/article/details/123294584
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /*min-width和max-width*/
        .div1{
            width: 100%;
            height: 40px;
            min-width: 1100px;/*仅仅指当浏览器宽度小于1100时滚动条一定出现，但是不一定是刚好1100*/
            max-width: 1150px;/*当宽度=100%时候，拉伸浏览器，当超出1150像素后，div不再扩展*/
            font-size: 40px;
            background-color: green;
        }
        /*min-height和max-height*/
        .div2{
            height: 10px;
            min-height: 30px;/*height是10px，最小height是30px，以30为准*/
            max-height: 50px;/*最多不超过50px*/
            background-color: red;
        }
        /*overflow容器(或盒子)里面的内容超出了容器范围的超出部分*/
        .div3{
            width: 300px;
            height: 1000px;
            overflow: hidden;/*超出部分隐藏*/
            overflow: scroll;/*增加滚动条,不管有没有超出部分都显示滚动条*/
            overflow: auto;/*自动增加滚动条*/
        }
        /*font-size(常用字体大小12，14，16)*/
        /*font-weight(字体粗细)*/
        #p1{
            font-size: 10px;/*浏览器默认16个像素，浏览器是设置的字体高度16px，宽度是自动缩放的*/
            font-weight: lighter;/*细体，有些字体没有细体*/
            font-weight: normal;/*默认*/
            font-weight: bold;/*粗体*/
            font-weight: bolder;
            font-weight: 400;
            /*100-900,有些字体加粗或变细可能到一定值就没反应了，是正常的，是字体不支持这么高或低的值*/
        }
        /*font-style(italic(斜体)|oblique|normal)*/
        #str2{
            font-style: oblique;/*倾斜（非斜体）*/
        }
        /*font-family*/
        #str1{
            font-family:Arial, Helvetica, sans-serif;/*回退机制：当第一个字体不兼容，使用第二个，以此类推*/
        }
        /*color*/
        #str3{
            color: red;
            color: #ff0000;
            color: rgb(255, 0, 0);
            color: rgb(100%, 0%, 0%);
        }
        /*
        color写法
            
            第一种：英文写法（不够全面，企业内一般不使用）

            第二种：十六进制写法
            光学三原色
                red      green      blue
                00-ff    00-ff      00-ff
                例如：#ff0000 红色

            第三种：0-255写法
                red      green      blue
                0-255    0-255      0-255
                例如：rgb(255，0，0) 或者 rgb(100%，0%，0%)

        */
        /*border*/
        #border1{
            width: 200px;
            height: 200px;
            border: 1px dotted #ff0000;/*复合属性 边框的宽度、边框的样式、边框的颜色*/
            border-width: 1px;/*边框的宽度,一个值是上下左右*/
            border-width: 1px 9px;/*边框的宽度，顺序：上下 左右*/
            border-width: 1px 9px 20px;/*边框的宽度，顺序：上 左右 下*/
            border-width: 1px 9px 20px 30px;/*边框的宽度，顺序：上 右 下 左*/
            border-style: solid;/*边框的样式*/
            border-color: aqua;
            border-top: 2px solid #00ff00;/*可以分上下左右写*/
            border-top-left-radius: 20px;
        }
        /*文本对齐*/
        .divc1{
            width: 300px;
            height: 300px;
            border: 3px solid black;
            text-align: center;/*left(默认)|center|right*//*水平对齐*/
            /*垂直居中(设置行高)*/
            line-height: 300px;/*文字的行高一般是16px（仅仅指的是文字），然后文字还有边距，上边距和下边距形成了每行文字的行间距离，上边距和下边距默认3px，也就是真实的文字的行高是16+3+3=22px*/
            
        }
        /*缩进*/
        input{
            text-indent: 2em;/*em等于字体的宽度，所以字体是正方形的情况下，1em=一个字符的宽度*/
        }
        /*文字装修*/
        input[type="text"]{
            text-decoration: underline  red;/*underline(下划线)line-through(中横线)overline(上划线)none(去掉)*/
            /*鼠标光标*/
            cursor: pointer;/*鼠标放上去有手势出现*/
            cursor: not-allowed;/*鼠标放上去有禁用出现*/
        }
        /*单行文本截断和显示省略号三大件*/
        #div9{
            width: 150px;
            height: 22px;
            border:1px solid black;
            white-space: nowrap;/*文本不换行*/
            overflow: hidden;/*隐藏超出*/
            text-overflow:ellipsis;/*隐藏部分+省略号*/
        }
        /*多行文本截断（css无法加省略号，css3才行）*/
        #div10{
            width: 150px;
            height: 50px;
            border:1px solid black;
            overflow: hidden;/*隐藏超出*/
        }
        /*display（改变标签的内联、块级、内联块级）*/
        #span333{
            display: block;/*把span改为块级元素*/
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /*当内联块级元素遇上内联元素时，解决对齐的问题(默认下方对齐)*/
        #div666{
            display:inline-block;/*强行转为内联块级*/
            width: 100px;
            height: 100px;
            background-color: yellow;
            vertical-align:middle;/*top|middle|bottom 和 正负数*/
        }
        /*多行文本垂直居中,三个步骤：把div设为table属性,span设为table-cell属性，并加上vertical-align: middle*/
        #div555{
            display:table;
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        #div555 span{
            display:table-cell;
            vertical-align: middle;
        }
        #cell{/*只设置table-cell也行*/
            display: table-cell;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            vertical-align: middle;
        }
    </style>

</head>
<body>
    <div id="cell">我想成为一个成功的</div>
    <div id="div555"><span>我想成为一个成功的</span></div>
    <div id="div666"></div>
    <span>123</span>
    <span id="span333">123</span>
    <div id="div10">
        <span id="span2">
            我想成为一个成功的后台开发人员我想成为一个成功的后台开发人员我想成为一个成功的后台开发人员我想成为一个成功的后台开发人员我想成为一个成功的后台开发人员我想成为一个成功的后台开发人员我想成为一个成功的后台开发人员我想成为一个成功的后台开发人员我想成为一个成功的后台开发人员我想成为一个成功的后台开发人员
        </span>
    </div>
    <div id="div9">
        <span id="span1">
            我想成为一个成功的后台开发人员
        </span>
    </div>
    <br/>
    <input type="text" />
    <div class="divc1" style="text-indent: 2em;font-size: 20px;">
        你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹你好，蓝轨迹
    </div>
    <div id="border1">边框</div>
    <div class="div3">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    </div> 
    <p id="p1">你好你好你好</p>
    <strong id="str2">斜体</strong>
    <strong id="str1">Font_family字体</strong>
    <strong id="str3">Color字体</strong>
    <div class="div1">11111111111111111111111
        1111111111111111112</div>
    <div class="div2">11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
        11111111111111111111111
    </div>       
    
        
</body>
</html>
liyang199103031
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-常见属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫
CSS-常见属性

“相关推荐”对你有帮助么？
