7.19CSS入门(续)

最新推荐文章于 2024-09-16 20:08:29 发布

yangyue012345

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量71

点赞数

分类专栏： CSS html HTML初学文章标签： javascript visual studio code html

本文链接：https://blog.csdn.net/qq_51967148/article/details/118940440

版权

html 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

HTML初学

2 篇文章 0 订阅

订阅专栏

学习内容：

一、CSS三大特性

1.层叠性：

样式冲突则遵循就近原则，哪个样式离结构近就执行哪个样式。

2.继承性：

子标签会继承父标签的某些样式(text-,font-,line-这些元素开头的可以继承，以及clolor属性
行高的继承：不带单位1.5就是当前行高的1.5倍

行高可以跟单位，也可以不带单位。

如果子元素没有设置行高，则会继承父元素的行高。

3.优先级

选择器相同则执行层叠性，否则按权重执行。
链接相当于直接写了个a{color: blue}

选择器	选择器的权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器和伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式 style	1，0，0，0
!important	无穷大

二、盒子模型的组成

盒子主要由四部分组成分别为

border(边框)

content(内容)

padding(内边距文字与表格的距离)

margin (外边距表格与表格之间的距离)

border: border-width border-style border-color

border-style: nono(无)/solid（实线边框）/dashed（虚线）/dotted(点线)

合并相邻边框 border-collapse:collapse;

padding调节文字与表格之间的距离

paddding:5px; 上下左右都为5px

padding: 5px 10px;上下是5px，左右为10px

padding:5px 10px 20px;上是px，左右为10x, 下为20px

padding;5px 10px 20px 30px;上5px，右10px，下20px，左30px

magin和padding一样
外边距可以让块级盒子水平居中但是要满足两个条件

(1)盒子必须指定了宽度

(2)左右外边距都是auto 例如：magin：0，auto

盒子的阴影

box-shadow：h-shadow(水平阴影)/v-shadow(垂直)/blur(模糊距离)/spreed(阴影尺寸)/color(颜色)/inset(内阴影)

（1）前两个必写，后面可选

（2）默认为外阴影，ouset不能写

list-style: none;去掉无序列表前面的圆点
圆角边框：border-radius: 数值（数值越大弧度越大）

也可以跟四个值，为顺时针的四个角

三、CSS三种布局

1、标准流： 标准流按照默认规定好的元素排列例如：块内元素行内块元素

2、浮动：让块内元素一行内显示

选择器{float：属性值；}

属性值 none;不浮动 left 左浮动 right 右浮动

浮动的元素会脱离表追流（脱标）
浮动的元素会一行显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性
浮动的元素指挥影响浮动盒子后面的标准流不会影响前面的标准流。

3、定位：可以让盒子自由的在某个盒子内移动或固定在屏幕中的某个位置,也可以压住其他盒子。

定位=定位模式+边偏移

定位模式

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

绝对定位:看父元素

如果没有父元素或者父元素没有定位，那就在浏览器的左上角。

如果父元素有定位，则以最近一级的有定为祖先元素为参照点移动位置。

四、元素的显示与隐藏

display显示隐藏隐藏后不再占有原来的位置

display: none; 隐藏对象

display：block；除了转换为块级元素之外，同时还具有显示元素的意思

visibility显示隐藏隐藏后继续占有原来的位置

visibility：visible;元素可见

visibility: hidden;元素隐藏

overflow 溢出显示隐藏

overflow: visible;溢出的内容显示默认

overflow：hidden;把溢出部分隐藏

overflow：scroll;把溢出的部分显示滚动条，不溢出也显示滚动条

overflow: auto;溢出才显示滚动条

学习产出：

1、网页快报一般模式练习

<!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>
        /* 清除内外边距 */
        * {
            margin: 0px;
            padding: 0px;
        }

        .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: normal;
            line-height: 32px;
            padding-left: 15px;
        }

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

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

        li {
            list-style: none;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }
    </style>

</head>

<body>
    <div class="box">
        <h3>
            品优购快报
        </h3>
        <ul>
            <li><a href="#">爆款耳机五折秒！</ a></li>
            <li><a href="#">母亲节，健康好礼低至五折！</ a></li>
            <li><a href="#">爆款耳机五折秒！</ a></li>
            <li><a href="#">9.9元洗100张照片！</ a></li>
            <li><a href="#">长虹只能空调立省1000元！</ a></li>
        </ul>
    </div>

</body>

</html>

常见网页模块：

<!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>
        .box {
            width: 1226px;
            height: 615px;
            background-color: red;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: rgb(0, 255, 242);
        }

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

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

<body>
    <div class="box">
        <div class="left">左手</div>
        <div class="right">
            <div>&</div>
            <div>&</div>
            <div>&</div>
            <div>&</div>
            <div>&</div>
            <div>&</div>
            <div>&</div>
            <div>&</div>
        </div>
    </div>
</body>

</html>