css 学习2

沅芷澧兰！

已于 2022-04-30 18:43:10 修改

阅读量116

点赞数

文章标签： css html5

于 2022-04-25 20:44:45 首次发布

本文链接：https://blog.csdn.net/weixin_52700040/article/details/124414007

版权

css学习笔记2

优先级注意

a自己相当于a { color : blue}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mEirT0YC-1650978183808)(image/css2/1650711674348.png)]

权重叠加

可以叠加，但是永远不会有进位

继承的权重是0,0,0,0；

盒子模型

网页布局本质

用css摆盒子

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sibQvL4y-1650978183810)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20220424135622520.png)]$

盒子边框

border:粗细，样式，颜色

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8sqsb5pw-1650978183810)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20220424135829432.png)]$

width单位为px

border—style：soild实线边框

dashed 虚线边框

dotted 点线边框

其他的很少使用

border-color 边框颜色

边框复合写法

border：没有顺序

border-top 上边框

border-bottom 下边框

设计一个200*200上红下蓝的盒子

    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            border-top: 1px solid red;
        }
    </style>
</head>

<body>
    <div></div>

运用了层叠性，只层叠了上边框

表格细线边框

border-collapse

把相邻边框合并在一起

内边距

padding

复合写法：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-niVcQ5pP-1650978183810)(D:\桌面\图片\css2\pading.png)]$

padding 只写一个及上下左右都是这个边距

跟2个值第一个是上下，第二个是左右

3个值：第一个上

第二个左右

第三个下

4个值：上右下左（顺时针）

padding后会影响盒子的宽度和高度

改width hight

就可以让盒子大小不变

新浪导航栏

    <style>
        .nav {
            height: 43px;
            border-top: 3px solid red;
            border-bottom: 1px solid #000;
            background-color: pink;
            line-height: 41px;
        }

        .nav a {
            display: inline-block;
            font-size: 12px;
            color: black;
            text-decoration: none;
            padding: 0 20px;
        }

        .nav a:hover {
            background-color: red;
            color: chocolate;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>

    </div>

盒子模型-外边距

margin

简写方式和padding相同

外边距应用-水平居中

1.必须有宽度

2.左右为auto

    <style>
        .nav {
            background-color: pink;
            width: 900px;
            height: 200px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="nav">
    </div>

用text-align: center;让行内元素水平居中

外边距合并

关于两个嵌套，塌陷

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VsPmpPHA-1650978183811)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20220425193059408.png)]$

清除内外边距

* {
	padding: 0;
	margin: 0;
	
}

行内元素最好只设置左右

综合案例

   <style>
       * {
           margin: 0;
           padding: 0;
       }

       body {
           background-color: #f5f5f5;
       }

       .box {
           width: 298px;
           height: 415px;
           background-color: #fff;
           margin: 100px auto;
       }

       .box img {
           width: 100%;
       }

       .re {
           padding: 0 28px;
           height: 70px;
           width: 14px;
           margin-top: 30px;
       }

       .pr {
           font-size: 12px;
           color: #b0b0b0;
           margin-top: 20px;
           padding: 0 28px;
       }

       .in {
           font-size: 14px;
           margin-top: 15px;
           padding: 0 28px;
       }

       .in h4 {
           display: inline-block;
           font-weight: 400;
       }

       .in span {
           color: #ff6700;
       }

       .in em {
           font-style: normal;
           color: #ebe4e0;
           margin: 0 6px 0 15px;
       }
   </style>
</head>

<body>
   <div class="box">
       <img src="img.jpg" alt="">
       <p class="re">kudasdljk1d51sdalcjklvkwaqkldk</p>
       <div class="pr">123459
       </div>
       <div class="in">
           <h4>1235465458</h4>
           <em>|</em>
           <span>99yuan</span>
       </div>
   </div>

</body>

综合案例2

<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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left: 15px;

        }

        li {
            list-style: none;
        }

        .box ul li a {
            font-size: 12px;
            color: #666;

            text-decoration: none;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }

        .box ul {
            padding-top: 7px;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            /* 垂直居中 */
            padding-left: 20px;


        }
    </style>
</head>

<body>
    <div class="box">
        <h3>评优够快报</h3>
        <ul>
            <li><a href="#">123</a></li>
            <li><a href="#">456</a></li>
            <li><a href="#">786</a></li>
            <li><a href="#">123</a></li>
            <li><a href="#">158</a></li>
        </ul>
    </div>
</body>

圆角边框

border-radius:xxpx;

radius 半径

后面也可以跟百分比

1.把高度设置为正方形的一半就是一个圆形，或者%50

2.把圆半径设置为高度的%50，就是一个圆角矩形。

3.后面跟的值

4个位顺时针

2个为对角线

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ckS4grp3-1650978183811)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20220426180233417.png)]$

盒子阴影

box-shadow

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UMcae34s-1650978183812)(D:\桌面\图片\学习\盒子阴影.png)]

1.注意 outside不能写

2.盒子阴影不占空间

原先没有影子鼠标经过产生

div：hover{}

文字阴影

text-shadow

浮动

传统网页布局的三种方式

标准流标签按照默认方式排列

浮动

float

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

什么是浮动

<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>
        .left,
        .right {
            float: left;
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>

浮动特性

1.浮动元素会脱离标准流

不再保留原先的位置

    <style>
        .ab {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #fff;
        }

        .cd {
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="ab"></div>
    <div class="cd"></div>

2.上沿对齐

3.浮动元素具有行内块元素特性

浮动元素经常和标准流的父亲搭配使用

浮动案例1

<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>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            height: 460px;
            width: 230px;
            background-color: purple;
            float: left;
        }

        .right {
            height: 460px;
            width: 970px;
            background-color: skyblue;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

浮动案例2

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            width: 296px;
            height: 285px;
            float: left;
            background-color: purple;
            margin-right: 14px;
        }

        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;

        }

        .box .last {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>

网页布局第二准则

先量出盒子大小

再布局

浮动案例3

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;

        }

        .left {
            width: 234px;
            height: 615px;
            background-color: purple;
            float: left;
        }

        .right {
            width: 992px;
            height: 615px;
            background-color: skyblue;
            float: right;
        }

        .right>div {
            width: 234px;
            height: 300px;
            background-color: pink;
            float: left;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

常见网页布局

<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>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;

        }

        .box {
            width: 980px;
            height: 300px;
            margin: 0 auto;
            background-color: pink;
        }

        .box li {
            width: 237px;
            height: 300px;
            background-color: gray;
            float: left;
            margin-right: 10px;
        }

        .box .nav {
            margin-right: 0;
        }

        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;

        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="nav">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

浮动注意

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TTMlKHs5-1650978183812)(D:\桌面\图片\学习\浮动注意.png)]$

清除浮动

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-njYUIrfT-1650978183813)(D:\桌面\图片\学习\清除浮动.png)]$

清除浮动元素造成的影响

clear:both

策略：闭合浮动

方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8mSsliI-1650978183813)(D:\桌面\图片\学习\清除.png)]$

1方法加的盒子必须是块级元素

2设置为 hidden。auto给父亲加

after伪元素清除

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FylhiDND-1650978183814)(D:\桌面\图片\学习\after伪元素清除发.png)]$

双伪元素清除

.clearfix:before
.clearfix:after {
content: ""
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

ps切图

图层切图

切片切图

ps插件

沅芷澧兰！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 学习2

css学习笔记2优先级注意a自己相当于a { color : blue}[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UmVgRDVN-1650890649144)(image/css2/1650711674348.png)]权重叠加可以叠加，但是永远不会有进位继承的权重是0,0,0,0；盒子模型网页布局本质用css摆盒子[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lo2WUsaD-1650890649145)(C:\Us
复制链接

扫一扫