CSS基础（一）

最新推荐文章于 2023-06-15 10:43:47 发布

街角棒棒糖

最新推荐文章于 2023-06-15 10:43:47 发布

阅读量825

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/dongtianyu_/article/details/108143620

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.基本概念

1.1什么是CSS

Cascading Style Sheet（CSS）层叠级联样式表

CSS作用: 美化网页

包括字体，颜色，边距，高度，宽度,背景图片，网页定位，网页浮动…

1.2发展史

CSS1.0

CSS2.0 DIV (块) + CSS, HTML与CSS结构分离的思想，网页变得简单，SEO（搜索引擎优化）
CSS2.1 浮动, 定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性~

1.3基本规范

CSS代码一般写下< style>< /style>标签里

语法：

选择器{

声明1；

声明2；

声明3；

}

1.4优势

1.内容和表现分离
2.网页结构表现统一,可以实现复用
3.样式十分的丰富
4.建议使用独立于htm的css文件
5.利用SEO,容易被搜索引擎收录!

1.5CSS的导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS的引入方式：</title>
    <!-- 1.外部样式表 -->
    <link rel="stylesheet" href="style.css">
    <!-- 2.内部样式表< -->
    <!--内部样式表，就是在htmL页面内部写样式，但是是单独写到style标签内部,结构与样式没有完全分离-->
    <style>
h1{
color: green;
}
</style>
</head>

<body>
    
    <!-- 3.行内样式表 -->
    <p style="color: pink;">粉红色的回忆</p>
    <p>结构与样式没有分离</p>
</body>
</html>

优先级：就近原则

拓展：

拓展:外部样式两种写法
●链接式:
html

<!-- 外部样式-->
<link re1="stylesheet" href="css/style.css">

●导入式:

@import是CSS 2.1特有的！

 <!--导入式-->
<style>
@import ur1("css/style.css");
</sty1e>

1.6Emmet语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emmet语法</title>
    <style>
        .one {
            text-indent: 2em;
            width: 100px;
            height: 100px;
            line-height: 26px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    1.生成多个标签 可以加*
    2.父子关系 ul>li
    3.兄弟关系 用+
    4.生成带有id 或带有类名字的，直接.demo 或 #tab tab键即可 默认div
    <div class="one"></div>
    <div id="tab"></div>
    <p class="one"></p>
    6.
    <!-- .demo$*5  生成的类按顺序排列-->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    7.如果想要生成的标签内部写内容用{}
    <p>laalla</p>
</body>

</html>

2.选择器

作用：选择页面上的某一个或者某一类元素

2.1基本选择器

标签选择器:选择一类标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器，会选择到页面上所有这个标签的元素 */
        h1 {
            color: aqua;
            background: aquamarine;
            border-radius: 24px;
        }

        p {
            font-size: 10px;
        }
    </style>
</head>

<body>
    <h1>学java</h1>
    <h1>学CSS</h1>
    <p>学html</p>
</body>

</html>

类选择器 class：选择所有class属性一致的标签，可以跨标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        .dong {
            color: aquamarine;
        }

        .tian {
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="dong">学java</h1>
    <h1 class="tian">学CSS</h1>
    <h1 class="dong">学CSS</h1>

</body>

</html>

id 选择器:全局唯一！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*id选择器，会选择到页面上所有的这个标签的元素
     id必须保证全局唯一
     */
        #dong {
            color: red;
        }
    </style>
</head>

<body>
    <h1 id="dong">学java</h1>
    <h1>学CSS</h1>
    <h1>学CSS</h1>

</body>

</html>

优先级：

不遵循就近原则，固定的

id选择器>class选择器>标签选择器

2.2层次选择器

1.后代选择器：在某个元素的后面

/*后代选择器 */
body p{
background: red;
}

2.子选择器

/* 子选择器*/ 
div>a{
            color: pink;
        }

3.并集选择器

/*并集选择器*/      
      div,
        p,
        ul li {
            color: pink;
        }

4.相邻兄弟选择器

/*相邻弟选择器:只有一个相邻(向下) */
.active + p{
background: #o13d30;
}
/*通用兄弟选则器，当前选中元素的所有兄弟元素*/
.active~p{
background: #02ff00;
}

2.3结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*ul 第一个子元素 */
        ul li:first-child {
            color: aqua;
        }

        /* ul最后一个子元素 */
        ul li:last-child {
            color: blue;
        }

        /* 选中p1 ：
 选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效 */
        p:nth-child(1) {
            background-color: chartreuse;
        }

        /* 选中父元素，下的p元素的第二个，类型 */
        p:nth-of-type(1) {
            color: crimson;
        }
    </style>
</head>

<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>

</html>

2.4属性选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo a {
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 24px;
            background: cyan;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 10px;
            font: bold 20px/50px Arial;
        }

        /* （正则表达式）
        =绝对等于
        *=包含
        ^=以...开头
        &=以...结尾
         */
        a[class*="links"] {
            background: yellow;
        }

        /* 选中href中http开头的元素 */
        a[href^=http] {
            background: red;
        }

        a[href$=png] {
            background: royalblue;
        }
    </style>
</head>

<body>
    <p class="demo">
        <a href="http://www.baidu.com " class="links item first" id="first">1</a>
        <a href="" class="links item active" target=" _blank" title="test">2</a>
        <a href=" images/123.html" class="links iten">3</a>
        <a href=" images/123.png" class="links ite ">4</a>
        <a href=" images/123.jpg" class="links iter ">5</a>
        <a href="abc" class="links iten">6</a>
        <a href="/a.pdf" class="links item">7</a>
        <a href="/abc.pdf" class="links iten">8</a>
        <a href="abc.doc" class="links iten">9</a>
        <a href="abcd.doc" class="links item last">10</a>
    </p>
</body>

</html>

3.美化网页元素

3.1为什么要美化网页

有效的传递页面信息
美化网页，吸引用户
凸显页面的主题
提高用户的体验

3.2span与div 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div和span标签</title>
</head>
<body>
    <div>我是一个div标签我自己独占一行（大盒子）</div>
    <span><b>百度（小盒子）</b>百度（小盒子）</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>
</html>

3.3字体样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体系列</title>
    <style>
        /* 字体样式 */
        h2 {
            font-family: '微软雅黑';
        }

        /* 字体大小 */
        p {
            font-size: 16px;
        }

        /* 多种字体 */
        body {

            font-family: Georgia, 'Times New Roman', Times, serif;
        }

        /* 字体粗细  bold/700：加粗  normal/400 默认值  */
        /* 数字等价于bold 一般开发用数字*/
        .bold {
            /* font-weight: bold; */
            font-weight: 700;
        }

        /* 文字样式 */
        .qingxie {
            font-style: italic;
        }

        /* 让倾斜的字体不倾斜 */
        em {
            font-style: normal;
        }
    </style>
</head>

<body>
    <h2>pink的秘密</h2>
    <p class="bold">王侯将相</p>
    <p class="qingxie">宁有种乎</p>
    <p>键盘敲烂</p>
    <p>工资过万</p>
    <em>下课时候的你</em>
</body>

</html>

3.4文本样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        /* 文本颜色 */
        div {
            /* color: pink;  预定义值*/
            /* color: #ff00ff;  十六进制（开发常用）*/
            color: rgb(255, 0, 0);
            /*gdb代码 */

        }

        /* 对齐文本 */
        h2 {
            text-align: center;
        }

        /* 装饰文本  none 默认(去除下划线)、 */
        p {
            /* 下划线 */
            text-decoration: underline;

            /* 删除线 */
            /* text-decoration: line-through; */

            /* 上划线 */
            /* text-decoration: overline; */

            /* 文本段落首行缩进 */
            /* text-indent: 10px; */
            /* em 相对单位一个大小*/
            text-indent: 2em;

            /* 行间距 */
            line-height: 26px;
        }

        /* 下划线，中划线，上划线 */
        a {
            text-decoration: none;
        }
         /* 文本图片水平对齐 */
        img,span{
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>啦啦啦</div>
    <h2>居中对齐</h2>
    <p><a href="#">下划线</a> </p>
    <p>百度（纳斯达克：BIDU）是全球最大的中文搜索引擎，中国最大的以信息和知识为核心的互联网综合服务公司，全球领先的人工智能平台型公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。</p>
    <p>“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于2000年1月1日在中关村创建了百度公司。
    </p>
    <p> 百度拥有数万名研发工程师，这是中国乃至全球都顶尖的技术团队。这支队伍掌握着世界上最为先进的搜索引擎技术，使百度成为中国掌握世界尖端科学核心技术的中国高科技企业，也使中国成为美国、俄罗斯、和韩国之外，全球仅有的4个拥有搜索引擎核心技术的国家之一
    </p>
</body>

</html>

3.5超链接伪类

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之伪类选择器</title>
    <!-- 链接伪类选择器 -->
    <style>
        /* 未访问的链接 a:link 把没有点击(访问过)的链接选择出来 */
        a{
            color: rgb(226, 21, 21);
        }
        a:link {
            color: #333333;
            text-decoration: none;
        }

        /* a :visited 选择点击过的(访问过的)链接 */
        a:visited{
            color: coral;
        }

        /* a:hover 鼠标移动经过那个链接*/
        a:hover {
            color: blue;
            text-decoration: underline;
        }

        /* a:active 鼠标按下未弹起时时 */
        a:active {
            color: chartreuse;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="#">未知的网站</a>
</body>

</html>

3.6 阴影

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径 */
#price{
    text-shadow:#000000 10px 10px 2px;
}

3.7列表

#nav {
   width: 211px;
   background: darkgray;
}

.title {
   font-size: 18px;
   font-weight: bold;
   text-indent: 1em;
   line-height: 30px;
   background: red;
}


/*
list-style
none：去除列表前的点
circle:空心园
decimal:数字
square:正方形
*/

ul li {
   height: 30px;
   list-style: none;
   text-indent: 1em;
}

a {
   text-decoration: none;
   font-size: 14px;
   color: #000000;
}

a:hover {
   color: cyan;
   text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表样式</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
    <div id="nav">
        <h2 class="title">全部商品分类</h2>
        <ul>
            <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
            <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
            <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
            <li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
            <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
            <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a></li>
            <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
            <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a
                    href="#">票务</a></li>
        </ul>
    </div>

</body>

</html>

3.8元素显示样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS元素显示模式 </title>

</head>

<body>
    html元素一般分为块元素（一行）和行内元素（一行多个）两种
    常见的块元素有 h1--h6、p、div、ul、ol、li等
    <!-- 块元素的特点： -->
    1.独占一行
    2.高度、宽度、外边距以及内边距都可控。
    3.宽度默认是容器（父级宽度）的100%
    4.是一个容器及盒子，里面可以放行内或者块元素。
    注意：
    文字类的元素内不能使用块级元素,
    p标签不能放块级元素，特别是 div
    标题标签也不可以
    <!-- 行内元素特点 -->例如:span
    1.一行可以显示多个
    2.宽、高直接设置是无效的
    3.默认宽度就是他本身的宽度
    4.行内元素只能容纳文本或者其他行内元素
    注意：
    · 链接里面不能再放链接
    ·特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。
    <!-- 行内块元素: img 、input 、td 它们具有块元素和行内元素的特点 -->
    <!-- 行内块元素的特点 -->
    1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
    2.默认宽度就是他本身内容的宽度（行内元素特点）。
    3.高度、宽度。内外边距都可以控制（块元素特点）。
</body>

</html>

转换显示样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示模式转换</title>
    <style>
        /* 将行内元素改为块元素 */
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            display: block;
        }
        /* 将块级元素改变为行内元素 */
        div{
            display: inline;
        }
        /* 将行内元素转换为行内块元素 */
        span{
            width: 200px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">金星</a>
    <a href="#">木星</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>

</body>

</html>

3.9背景

背景颜色

一般情况下元素背景颜色默认值是transparent(透明)

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style>
       h3{
           width: 118px;
           height: 40px;
           font-size: 14px;
           font-weight: 400;
           line-height: 40px;
           background-image: url("images/圆环.png");
           background-repeat: no-repeat;
           background-position: left center;
           text-indent: 1.5em;
       }
    </style>
</head>
<body>
    <h3>成长守护平台</h3>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超大背景图</title>
    <style>
        body{
            background-image: url("images/1.png");
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>
</head>
<body>
    
</body>
</html>

背景位置

1.参数是方位名词
●如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left 效果-致
●如果只指定了一个方位名词，另一个值省略,则第二个值默认居中对齐
2.参数是精确单位
●如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标
●如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中

3.混合单位

第一第二种方式可以混合使用，但第一个是x坐标,第二个是y坐标。

背景图像固定

 /* 背景固定 
            scroll:背景图像随对象内容滚动
            fixed:图像固定
            */
            background-attachment: fixed;

背景色半透明

 div{
            width: 300px;
            height: 300px;
            background: rgba(0, 0,0,0.3);
        }

最后一个参数是alpha透明度,取值范围在0~1之间
我们习惯把0.3的0省略掉,写为background: rgba(0,0, 0, .3);
注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响
CSS3新增属性,是IE9+版本浏览器才支持的
但是现在实际开发我们不太关注兼容性写法了,可以放心使用

3.10渐变

渐变背景:https://www.grabient.com/

background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

4.CSS三大特性

CSS有三个非常重要的三个特性:层曼性、继承性、优先级。

4.1层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则:
● 样式冲突,遵循的原则是就近原则,哪个样式离结构近.就执行哪个样式
● 样式不冲突,不会层叠

4.2继承性

CSS中的继承子标签会继承父标签的某些样式。如文本颜色和字号。简单的理解就是:子承父业。

恰当地使用继承可以简化代码,降低CSS样式的复杂性

子元素可以继承父元素的样式( text- , font- , line这些元素开头的可以继承。以及color属性)

body{
    font:12px/1.5;
}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高,则会继承父元素的行高为1.5
此时子元素的行高是:当前子元素的文字大小* 1.5
body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

4.3优先级

当同一个元素指定多个选择器.就会有优先级的产生。
●选择器相同,则执行层叠性
●选择器不同 ,则根据选择器权重执行

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=""	1，0，0，0
！important 重要的	无穷大

优先级注意点: .

权重是有4组数字组成但是不会有进位。
可以理解为类选择器永远大于元素选择器id选择器永远大于类选择器,以此类推…
等级判断从左向右,如果某-位数值相同,则判断下-位数值。
可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10, id选择器100,行内样式表为1000, !important无穷大.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        /* 父亲的权重是100 */
        #father {
            color: red;
        }

        /* p继承的权重为0 */
        /* 所以以后我们看标签到底执行那个样式，就先看这个标签有么有直接被选出来 */
        p {
            color: pink;
        }
        body{
            color: red;
        }
     /*   a链接浏览器默认制定了一个样式蓝色的有下划线a {coLor: blue;}*/
    </style>
</head>

<body>
    <div id="father">
        <p>你还是很好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>

</html>

权重计算

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重的叠加</title>
    <style>
        /* 复合选择器会有权重叠加的问题 */
        /* 权重虽然会叠加，但是永远不会有进位的问题 */
        /* ul li 权重 0，0，0，1+0，0，0，1=0，0，0，2 */
        ul li {
            color: green;
        }

        /* li的权重为0，0，0，1 */
        li {
            color: red;
        }
        /* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1   11 */
        .nav li {
            color: pink;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>

</html>

5.盒子模型

5.1网页布局

网页布局过程：

1.先准备好相关的网页元素，网页元素基本都是盒子Box

2.利用CSS设置好盒子样式，然后摆放到相应位置。

3.往盒子里面装内容

网页布局的核心本质：就是里用CSS摆盒子。

5.2盒子模型（Box Model）组成

所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子.也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容

在这里插入图片描述

margin:外边距

border:边框

padding:内边距

content 内容

5.3边框（border)

border可以设置元素的边框。边框有三部分组成边框宽度(粗细)边框样式边框颜色
语法:

border : border-width|| border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            border-width: 5px;
            border-style: solid;
            /*实线  dashed虚线 dotted点线*/
            border-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

边框的简写：

border:1px solid red;没有顺序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            border: 5px solid blue;
            /* 上边框 */
            border-top: 5px solid pink;
            /* 下边框 */
            border-bottom: 10px dashed purple;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

边框会影响盒子实际大小

边框会额外增加盒子的实际大小，因此我们有两种解决方案

测量盒子大小的时候，不量边框。
如果测量的时候包含了边框，则需要width/height减去边框宽度

5.4内边距（padding)

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距</title>
    <style>
     div{
         width: 200px;
         height: 200px;
         background-color:pink;
         padding-left: 20px;
         padding-top: 10px;
     }
    </style>
</head>
<body>
    <div>
        盒子内容是content
    </div>
</body>
</html>

padding属性(简写属性)可以有一到四个值。

值的个数	表达意思
padding: 5px 10px;	1个值，代表上下左右都有5像素内边距;
padding: 5px 10px ;	2个值，代表上下内边距是5像素左右内边距是10像索;
padding: 5px 10px 20px;	3个值，代表上内边距5像素左右内边距10像素下内边距20像素;
padding: 5px 10px 20px 30px;	4个值，上是5像素右10像素下20像素左是30像素顺时针

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距</title>
    <style>
     div{
         width: 200px;
         height: 200px;
         background-color:pink;
         /* padding: 5px; */
         /* padding: 5px 10px; */
         /* padding: 5px 10px 20px; */
         padding: 5px 10px 20px 30px;

     }
    </style>
</head>
<body>
    <div>
        盒子内容是content
    </div>
</body>
</html>

当我们给盒子指定padding值之后，发生了2件事情:
1.内容和边框有了距离,添加了内边距。

2.padding影响了盒子实际大小。
也就是说,如果盒子已经有了宽度和高度,此时再指定内边框。会撑大盒子。

解决方案:
如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可。

案例

padding内边距可以撑开盒子，我们可以做非常巧妙的运用
因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了,直接给padding最合适

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #eeddee;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            /* a属于行内元素 此时必须要转换 行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 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>
</body>

</html>

如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小

5.5外边距（margin)

margin属性用于设置外边距.即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写方式代表的意义跟padding完全一致

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

    <div>1</div>
    <div>2</div>

</body>

</html>

块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件:
①盒子必须指定了宽度(width)。
②盒子左右的外边距都设置为 auto .
.header{ width: 960px; margin:0 auto; }
常见的写法,以下三种都可以:

margin-left: auto; margin-right auto;
margin: auto;
margin: 0 auto;

注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

外边距合并

使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时。如果上面的元素有下外边距margin-bottom ,下面的元素有上外边距margin-top。则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元索垂直外边距的合并。

解决方案:
尽量只给一个盒子添加margin值。

2.嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(好关系)的块元素，元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

解决方案:
①可以为父元素定义上边框。
②可以为父元素定义上内边距。
③可以为父元素添加overflowhidden.

5.6清除内外边距

网页元素很多都带有默认的内外边距。而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。

/*这句话也是CSS的第一行代码
*{
    margin:0;
    padding:0;
}

注意 : 行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

5.7总结

1.布局为什么用不同盒子我只想用div ?
标签都是有语义的,合理的地方用合理的标签。比如产品标题就用h,大量文字段落就用p
2.为啥用辣么多类名?
类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易后期维护也方便。
3.到底用margin还是padding ?
大部分情况两个可以混用,两者各有优缺点,但是根据实际情况,总是有更简单的方法实现。
4.自己做没有思路?
布局有很多种实现方式,可以开始先模仿然后再做出自己的风格。
多运用辅助工具,比如屏幕画笔,ps等等

街角棒棒糖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（一）

1.基本概念1.1什么是CSSCascading Style Sheet（CSS）层叠级联样式表CSS作用: 美化网页包括字体，颜色，边距，高度，宽度,背景图片，网页定位，网页浮动…1.2发展史CSS1.0CSS2.0 DIV (块) + CSS, HTML与CSS结构分离的思想，网页变得简单，SEO（搜索引擎优化）CSS2.1 浮动, 定位CSS3.0 圆角，阴影，动画… 浏览器兼容性~1.3基本规范CSS代码一般写下< style>< /style&gt
复制链接

扫一扫