灯塔:CSS笔记(3)

盒子模型:

盒子的概念

1.页面中的每一个标签都可以看做是一个"盒子",通过盒子的视角更方便的进行布局

2.浏览器在渲染(显示)网页时,会将网页中的元素看作是一个个矩形区域,我们也形象的称之为盒子

盒子模型:

CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)规定,这就是盒子模型

记忆:可以联想现实中的包装盒

内容的宽度和高度

边框(border)-连写形式

属性名:border

属性值:单个取值的连写,取值之间可以用空格隔开

如:border:10 px solid red;

边框(border)- 单个属性

作用:给设置边框粗细、边框样式、边框颜色效果(会把盒子撑大)

单个属性:

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

边框(border)-单方向设置

场景:只给盒子的某个方向单独设置边框

属性值:border-方位名词

属性值:连写的取值

CSS3盒模型(自动內减)

清除默认内外边距

外边距折叠现象 - 塌陷现象

场景:互相嵌套的块级元素 ,子类元素的margin-top会作用在父元素上

结果:导致父元素一起往下移动

解决方法:

1.给父元素设置border-top或者padding-top(分隔父子元素的margin-top)

2.给父元素设置overflow:hidden

3.转换成行内块元素

4.设置浮动

注:如果想要通过margin或padding改变行内标签的垂直位置,无法生效

行内标签的margin-top和buttom ,不生效 ;行内标签的padding-top或buttom ,不生效;但是可以以通过增加行高的方式改变内边距。

案例:

html 复制代码
<!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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .news{
            width: 422px;
            height: 337px;
            margin: 0 auto;
            border: 1px solid #dfdfdf;
            padding: 42px 30px;  
            margin: 50px auto;
        }
        .news h2{
            border-bottom: 1px solid #e9e9eb;
            font-size: 30px;
            line-height: 1;
            padding-bottom: 7px;
        }
       .news li{
        color: #6d686c;
        list-style: none;
        line-height: 42px;
        border-bottom: 1px dashed #e9e9eb;
        padding-left: 27px;
       }

    </style>
</head>
<body>
    <div class="news">
        <h2>最新文章/New Articles</h2>
       <ul>
        <li>北京招聘网页设计,平面设计,php</li>
       <li>体验javascipt的魅力</li>
       <li>jquery世界来临</li>
       <li>网页设计师的梦想</li>
       <li>jquery中的链式编程是什么</li>
    </ul>
       
    </div>
</body>
</html>
相关推荐
LaoZhangAI29 分钟前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua29 分钟前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI32 分钟前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室33 分钟前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
溪饱鱼37 分钟前
Nuxt3能上生产吗?
前端
咖啡教室1 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
LaoZhangAI3 小时前
Claude MCP模型上下文协议详解:AI与外部世界交互的革命性突破【2025最新指南】
前端
LaoZhangAI3 小时前
2025最全Cursor MCP实用指南:15个高效工具彻底提升AI编程体验【实战攻略】
前端
Kagerou3 小时前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀4 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js