css03笔记

最新推荐文章于 2024-07-20 15:40:46 发布
最新推荐文章于 2024-07-20 15:40:46 发布
阅读量232 收藏
点赞数 1
分类专栏： 黑马前端笔记 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58035213/article/details/128695609
版权

目录

css三大特性

优先级

权重叠加计算

chrome调试工具

盒子模型

1.1 盒子模型的介绍

2.1内容的宽度和高度

3.1边框（border）

3.2边框-单方向设置

3.3边框-单个属性

综合案例一（新浪导航）

4.1 内边距（padding）- 取值

4.2 内边距（padding）- 单方向设置

（拓展）不会撑大盒子的特殊情况

4.5 CSS3盒模型（自动内减）

5.1 外边距（margin）- 取值

5.2 外边距（margin） - 单方向设置

5.4 清除默认内外边距 

 版心居中

综合案例二（新闻列表）

css三大特性

1、继承性

2、层叠性

3、优先级

优先级

不同的选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式。

优先级公式:

继承<通配符选择器（*）<标签选择器<类选择器<id选择器<行内样式<！important

注意：

1、！important写在属性值的后面，分号的前面！

2、！important不能提升继承的优先级，只要是继承优先级最低！

3、实际开发中不建议使用！important

通配符选择的范围比标签广  标签更精确所以优先级更高 

选择器的选中范围越广 它的优先级就越低

<!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>
        /* 继承 */
        body {
            color:red;
        }
        #box {
            color:blue;
        }
        .box {
            color:orange;
        }
        /* 标签 */
        div {
            color:green;
        }
        
    </style>
</head>
<body>
    <div class="box" id="box">测试优先级</div>
</body>
</html>

 

 

 

 !important不要给继承的添加，自己有样式无法继承父级样式。

权重叠加计算

 

<!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>
        /* （行内，id，类，标签） */

        /* (0,1,0,1) */
        div #one {
            color:orange;
        }
        /* (0,0,2,0) */
        .father .son {
            color:skyblue;
        }
        /* (0,0,1,1) */
        .father p {
            color:purple;
        }
        /* (0,0,0,2) */
        div p {
            color:pink;
        }
        
    </style>
</head>
<body>
    <div class="father">
        <div class="son" id="one">我是一个标签</div>
    </div>
</body>
</html>

 

！important慎用

！important是最高的 继承最低

     #father {
            color:green !important;
        }
        
    </style>
</head>
<body>
    <div class="father">
        <div class="son" id="one">我是一个标签</div>
    </div>
</body>
</html>

 ！important加在继承上 也没用 继承就是权重最低的 不生效

如果选择器权重一样 那么谁在后边谁生效

如果选择器都是继承，那么看继承哪个父级，哪个父级高，哪个选择器生效。

<!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>
        /* 都是继承的特殊情况 */
        div p {
            color:red;
        }

        .father {
            color:blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son">
            <span>文字</span>
        </p>
    </div>
</body>
</html>

是红色

优先继承亲爹

chrome调试工具

 css上一行出错，下一行会受影响。

PxCook软件：

psd图用开发模式

盒子模型

1.1 盒子模型的介绍

页面中的每一个标签，都可看做是一个盒子。

css中规定每个盒子分别由:内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。

 

<!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>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框线 */
            border: 1px solid #000;
            /* 内边距：内容和盒子边缘之间*/
            padding: 20px;
            /* 外边距 ：出现在两个盒子之间，出现在盒子的外面*/
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
    <div>
        内容
    </div>
</body>
</html>

2.1内容的宽度和高度

盒子内容区域的大小

属性：width/height

3.1边框（border）

border：10px solid red;

快捷键：bd + tab

dashed是虚线

solid是实线

dotted是点线

不分先后顺序

3.2边框-单方向设置

border-方位名词

例如：

border-left：5px dotted #000；

3.3边框-单个属性

作用属性名属性值
边框粗细border-width数字+px
边框样式border-style实线solid、虚线dashed、点线dotted
边框颜色border-color颜色取值

 用复合更简单 这个了解即可

<!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>
        /* 盒子尺寸=width / height +边框线 */
        /* 如果400*400尺寸 */
        /* border撑大盒子尺寸 */
        div {
            width: 380px;
            height: 380px;
            background-color: green;
            border:10px solid #000;
        }
    </style>
</head>
<body>
    <div>div</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 {
            height: 40px;
            border-top:3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        /* 后代选择器 选择box里的a */
        .box a {
            width: 80px;
            height: 40px;
            /* 推荐先加上：清楚的看到文字在什么位置 */
            /* background-color: #edeef0; */
            display:inline-block;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 40px;
            font-size: 12px;
            color:#4c4c4c;
            text-decoration: none;
        }
        .box a:hover {
            background-color: #edeef0;
            color:#ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </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 {
            height: 40px;
            border-top:3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        /* 后代选择器 选择box里的a */
        .box a {
            /* width: 80px; */
            padding:0 16px;
            height: 40px;
            /* 推荐先加上：清楚的看到文字在什么位置 */
            /* background-color: #edeef0; */
            display:inline-block;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 40px;
            font-size: 12px;
            color:#4c4c4c;
            text-decoration: none;
        }
        .box a:hover {
            background-color: #edeef0;
            color:#ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航啦啦啦啦</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
</body>
</html>

 

 

4.1 内边距（padding）- 取值

作用：设置 边框 与 内容区域 之间的距离
属性名：padding
常见取值：
 
记忆规则： 从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

·盒子实际大小计算公式：

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
•
注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子
➢ 盒子实际大小终极计算公式：
•
盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
•
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
➢ 解决：当盒子被border和padding撑大后，如何满足需求？
•
自己计算多余大小，手动在内容中减去（手动内减）

 

 

<!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>
        div {
            width: 240px;
            height: 240px;
            background-color: pink;
            border:10px solid #000;
            padding:20px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

4.2 内边距（padding）- 单方向设置

➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名：padding - 方位名词
➢ 属性值：数字 + px

（拓展）不会撑大盒子的特殊情况

➢ 不会撑大盒子的特殊情况（块级元素）
1. 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
2. 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

4.5 CSS3盒模型（自动内减）

➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决 方法 ① ：手动内减
操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去 
<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            border:1px solid #000;
            padding: 20px;
             /* 内减模式 */
            /* 变成css3的盒子模型 不需要手动做减法 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

5.1 外边距（margin）- 取值

➢ 作用：设置边框以外， 盒子与盒子之间 的距离
➢ 属性名：margin
➢ 常见取值：
➢ 记忆规则： 从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

5.2 外边距（margin） - 单方向设置

➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px

5.4 清除默认内外边距 

 版心居中

<!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>
        div {
            width: 1000px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            /* 要保证左右auto */
        }
    </style>
</head>
<body>
    <div>版心</div>
</body>
</html>

综合案例二（新闻列表）

网站logo才用h1

    /* 去掉列表的符号 */

        ul {

            list-style: none;

        }

<!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: 0;
            padding: 0;
            /* 所有的标签都可能添加内边距或border，都内减模式 */
            box-sizing: border-box;
        }

        .news {
            width: 500px;
            height: 400px;
            border:1px solid #ccc;
            margin:52px auto;
            padding:42px 30px 0;
        }
        .news h2 {
            border-bottom:1px solid #ccc;
            font-size: 30px;
            /* 行高是1倍，就是字号的大小 */
            line-height: 1;
            padding-bottom: 10px;
        }
        /* 去掉列表的符号 */
        ul {
            list-style: none;
        }
        .news li {
            height: 50px;
            border-bottom: 1px dashed #ccc;
            padding-left: 28px;
            line-height: 50px;
        }
        .news a {
            text-decoration: none;
            color:#666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="news">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
        </ul>
    </div>
</body>
</html>

 

日子如影儿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS笔记03
小小鹏的小小博客
04-27 126
CSS笔记03 盒子模型： 盒子边框border； 边框 填充泡沫厚度：padding； 内边距 与其他盒子距离：margin； 外边距 border:宽度 样式 颜色 &lt;style&gt; .box{ width: 200px; height: 200px; border-c...
CSS3笔记
PPDY93的博客
01-09 123
第二部分CSS3 2.1CSS样式表的基本使用 链接外部样式文件 通过link标签将外部的css文件导入到我们当前的html文件中。 —好处：将数据和显示分离，同一份css文件也可以被多个html共用。 —坏处：浏览器先加载数据信息，再读取数据信息中的link标签，再加载link所导入的文件，相对而言比较慢 导入外部样式文件 通过@import导入，但是不推荐这么使用，有些浏览器不支持此操作的。 使用内部样式定义 —好处：统一加载，相对较快 —坏处：数据和样式揉在一起，不方便管理，而且css样式也
Css3中!important的使用方法
weixin_34356138的博客
07-12 871
就像使用任何技术一样，一项技术的优缺点取决于它所使用的环境。所以，如果需要的话要在什么时候使用!important呢？下面济南网站建设为您讲解下在Css3中!important的使用方法。 除非所有的其他的方法都已经行不通了，!important声明应该在绝对必要的情况下才能够使用。如果使用!important仅仅是处于懒惰，比如要完全避免网页代码...
css盒子模型
ygangying的博客
09-16 301
Day06上午（CSS）CSS 三大特性CSS层叠性CSS继承性CSS优先级CSS优先级CSS特殊性（Specificity）盒子模型盒子模型（Box Model）盒子边框（border）盒子边框写法总结表表格的细线边框圆角边框(CSS3)内边距（padding）下午 上午（CSS） CSS 三大特性 CSS层叠性 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过...
【CSS3】-04 权值与 !important
yang1111111112的博客
02-07 125
权值： 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码： p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/ ...
CSS中提升优先级属性!important的用法总结
大头之家
11-07 6178
前提: 我们有时候设置了css属性,但是在chrome查看时候发现设置的属性并没有起作用,用开发者工具查看,属性上被画了横线 color:red; 被横线划掉的Css是因为属性的不支持或者层次被覆盖 具体可能性有以下几种： 浏览器对样式有支持和不支持属性，被横线划掉的属于不支持属性 浏览器会自动调用跟指定元素有关的所有样式，被横线划掉的属于不次级
CSS之!important（重要性）
MR_yuan24的专栏
10-19 897
我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。 如下代码： p{color:red!important;} p{color:green;} 三年级时，我还是一个胆小如鼠的小女孩。 这时 p 段落中的文本会显示的red红色。 注意：!important要写在分号的前面 这里注意当网页制作者不设置cs
css课堂笔记前端css课堂笔记
08-05
CSS课堂笔记 本文档详细介绍了CSS的基本概念、语法、选择器、导入方式等知识点，为读者提供了系统的CSS基础知识。 一、CSS概念 CSS（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。...
CSS 学习笔记
09-25
在CSS学习过程中，了解并熟练掌握ID和Class的使用是非常基础且重要的。ID与Class都是CSS选择器，但它们有着不同的特性和应用场景。 ID选择器（#）的主要优点在于其高优先级，这意味着当需要为特定元素赋予特殊样式...
CSS笔记.pdf
07-14
1. **外部样式表**：通过`<link>`标签引用外部CSS文件，例如`<link rel="stylesheet" type="text/css" href="文件路径" />`，这种方式便于管理和复用样式，适用于大型项目。 2. **内部样式表**：在HTML文档的`<head>...
css笔记
04-02
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
css笔记css笔记css笔记
04-03
在网页设计领域，CSS（层叠样式表）扮演着至关重要的角色，它使得网页的布局、字体、颜色、背景等视觉元素得以精确控制。CSS 的引入解决了早期纯 HTML 页面表现与结构混合的问题，实现了内容与样式的分离，提高了...
css中!important的作用
weixin_30698527的博客
08-24 968
　　{*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。众所周知，!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解 这是什么原理： 　　*对于Ie系列浏览器都能够识别， firefox 浏览器则不能识别; 　　!imp...
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 518
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 239
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 344
网页隐藏版一行小说阅读器
HTML、CSS、JS浅浅浅浅浅解
最新发布
lbdking的博客
07-20 1435
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
CSS|06 背景样式
Catherinemin的博客
07-19 777
距离他左边的盒子的距离为100px，第二个100px表示 背景图片的。/*左内填充，盒子里面的内容到左边边框线的距离，就称为左内填充*/语法： background-color: red;/*background-repeat 平铺*//*background-repeat 平铺*//*background-repeat 平铺*/
CSS专业笔记：精华技巧与提示
"这是一本关于CSS的学习笔记，旨在为专业人士提供CSS的详细知识和技巧。书中涵盖了CSS的基础知识，如外部样式表、内部样式、@import规则、内联样式以及如何通过JavaScript改变CSS样式。此外，还深入讨论了CSS规则的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值