CSS 02

发布于：2022-12-28 ⋅ 阅读:(324) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

边框

  1. 边框分开的写法以及复合写法

    有边框的前提必须明确标签是否有高低值。

    分开写法：

    border-with: 数值px ； //边框的粗细

    border-style: 类型；（solid实线/dashed虚线/dotted点线）//边框样式

    border-color: 颜色；边框颜色

    符合写法：

    border: 粗细数值 类型 边框颜色；//例子： border: 5px solid pink;

    具体某一边的写法：

    border-top/bottom/left/right: 粗细数值 类型 边框颜色

  2. 关于边框一些需要注意的style属性

    在table中，单元格之间有间距，消除间距需要在table/td/th 中合并相邻的边框，格式如下

    border-collapse: collapse;

    边框的使用会影响块级元素的实际大小，比如我们需要一个200*200的div，因此需要这么写

    <style>
div{
width: 180px;
height: 180px;
background: pink;
border: 10px solid red;
}
</style>

    内边距

  3. 内边距的写法

  5. 首先在html中，元素从里到外分别由内边框、边框、外边框包裹。它们对于容器的大小有影响。

    padding-left/top/right/bottom: 数值 //指定某个边框的内边距

    padding: 数值 //默认上下左右的内边距

  6. 练习，做一个横向新浪导航，鼠标移入导航栏，背景颜色会发生改变

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav{
            height: 40px;
            border-top:3px solid #ff8500;
            border-bottom: 1px solid burlywood;
            background-color: #fcfcfc;
            line-height: 40px;
        }
        .nav a{
            display: inline-block;
            height: 40px;
            padding: 0px 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
​
        .nav a:hover{
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="#">新浪导航</a>
    <a href="#">手机新浪网</a>
    <a href="#">移动客户端</a>
    <a href="#">微博</a>
</div>

    外边距

  7. 外边距的写法

    margin-top/bottom/right/left: 数值 //指定某个方法的外边框

    margin：数值 1 数值2 //数值1 是上下的外边框距离， 数值2是左右的外边框距离

    margin: 数值 四个方向统一的外边框距离

  8. 如何让块级元素水平居中

    前提是块级元素的width和height必须要有值

    margin：数值 auto //auto值左右的外边框距离相同

    递进问题：如何让行内元素或者行内块级元素水平居中

    在父元素中添加 text-align: center;

  9. 外边距合并

    外边距合并分为两种：

    第一种：相邻块级元素垂直外边距合并

    看一段代码：

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_1,.div_2{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .div_1{
            margin-bottom: 100px;
        }
        .div_2{
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="div_1">
        这是一个div
    </div>
    <div class="div_2">
        这是二个div
    </div>
</body>

    这段代码执行后，div1和div2之间会有300px的外边距，我们可以在两个div之间插入其它CSS功能。

    第二种：嵌套块级元素垂直外边距塌陷

    也是看这段代码

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* 溢出处理 隐藏 */
            overflow: hidden;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
​
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
​
        </div>
    </div>
</body>

    其中在父元素我们必须写overflow：hidden这个属性，否则子元素的margin-top: 100px;会无法生效。

  10. 如何清除内外边距

    浏览器界面或者table会自带的有内外边距，如果不想要内外边距。在style中写：

    *{ margin: 0; padding: 0; }

    *指的是通配选择器，也可以指定具体的元素。

  11. 练习，制作一个蓝牙耳机的广告

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        *{
            margin: 0;
            padding: 0;
        }
​
        body{
            background-color: #f5f5f5;
        }
​
        a{
            color: #333333;
            text-decoration: none;
        }
​
        .box{
            width: 300px;
            height: 370px;
            background-color: #ffffff;
            margin: 100px auto;
        }
​
        .box img{
            width: 100%;
        }
​
        .review{
            height: 30px;
            font-size: 14px;
            padding: 0 28px;
            margin-top: 30px;
        }
​
        .appraise{
            font-size: 12px;
            color: orange;
            margin-top: 20px;
            padding: 0px 28px;
        }
​
        .info{
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }
​
        .info h4{
            display: inline-block;
            font-weight: 400;
        }
​
        .info em{
            font-style: normal;
            color: #b0b0b0;
            margin: 0 6px 0 15px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="./images/img.jpg"/>
    <p class="review" >耳机不错，味道很香，坐着很舒服，下次回购</p>
    <div class="appraise">
        来自于水军的评论
    </div>
​
    <div class="info">
        <h4><a href="#">蓝鸭耳机</a></h4>
​
        <em>|</em>
​
        <span>99.9</span>
    </div>
</div>
</body>

    效果图如图

  12.  

  13. 练习：一个简单的热搜榜单

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_1{
            width: 300px;
            height: 175px;
            border: 1px solid grey;
        }
​
        .div_2{
            width: 300px;
            height: 40px;
            border-bottom: 1px dotted grey;
        }
​
        .div_2 h2{
            display: block;
            margin: 10px 5px 0px 15px;
            font-weight: 200;
        }
​
        .div_3{
            padding-left: 15px;
            padding-top: 5px;
        }
​
        ul{
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
​
        a{
            text-decoration: none;
        }
​
        a:link{
            color: black;
        }
​
        ul li a:hover{
            text-decoration: underline;
        }
    </style>
</head>
​
<body>
<div class="div_1">
    <div class="div_2">
        <h2>品优购快报</h2>
    </div>
    <div class="div_3">
        <ul>
            <li><a href="#" >【特惠】爆款耳机五折秒</a></li>
            <li><a href="#" >【特惠】母亲节，健康好礼低至5折</a></li>
            <li><a href="#" >【特惠】坤坤1折秒</a></li>
            <li><a href="#" >【特惠】9.9元洗100张照片</a></li>
            <li><a href="#" >【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</div>
​
</body>

    效果如图

  14.  

    其它边框，阴影

  15. 如何让块元素带有曲行角

    在style属性中加入属性：

    border-top-left-radius: 数值；//左上角

    border-top-right-radius: 数值；//右上角

    border-bottom-left-radius: 数值；//左下角

    border-bottom-right-radius: 数值；//右下角

    border-radius: 数值；//四个角度都有，统一写法

    border-radius: 数值1，数值2，数值3，数值4 //分别是左上角，右上角，右下脚，左下角（顺时针转一圈）

  16. 块元素阴影

    格式：box-shadow: 数值1 数值2 数值3 数值4 rgba()函数/颜色;

    数值1：用来设置对象的阴影水平偏移值。可以为负值

    数值2：用来设置对象的阴影垂直偏移值。可以为负值

    数值3：用来设置对象的阴影模糊值。不允许负值

    数值4：用来设置对象的阴影外延值。可以为负值

    rgba()函数/颜色：设置对象的阴影的颜色

  17. 文字阴影

    格式：text-shadow: 数值1 数值2 数值3 rgba()函数/颜色；

    数值1：用来设置对象的阴影水平偏移值。可以为负值

    数值2：用来设置对象的阴影垂直偏移值。可以为负值

    数值3：用来设置对象的阴影模糊值。不允许负值

    rgba()函数/颜色：设置对象的阴影的颜色

  18. 如何设置行内块元素中间的缝隙

    在块级元素中加入属性：float：left/right；

    作用：同事具有float属性的行内块元素会按照方向一个紧贴一个。没有这个属性的行内块级元素会被略过。

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布