CSS的盒子模型(重点)

网页布局的三大核心:盒子模型、浮动、定位

网页布局的过程:

1. 先准备好相关的网页元素,网页元素基本都是盒子 Box 。
2. 利用 CSS 设置好盒子样式,然后摆放到相应位置。
3. 往盒子里面装内容.
网页布局的核心本质: 就是利用 CSS 摆盒子。

  • 盒子模型的组成:

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


  • 边框(boeder)

CSS 边框属性允许你指定一个元素边框的样式和颜色。

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

边框样式 border-style 可以设置如下值:
 none:没有边框即忽略所有边框的宽度(默认值)
 solid:边框为单实线(最为常用的)
 dashed:边框为虚线 
 dotted:边框为点线

  • 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse:collapse;

 collapse 单词是合并的意思
 border-collapse: collapse; 表示相邻边框合并在一起

边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:
1. 测量盒子大小的时候,不量边框.
2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度


内边距(padding)

padding 属性用于设置内边距,即边框与内容之间的距离。

  • 内边距影响盒子实际大小的情况

当我们给盒子指定 padding 值之后,发生了 2 件事情:
1. 内容和边框有了距离,添加了内边距。
2. padding影响了盒子实际大小。
也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。

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


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


  •  外边距(margin)

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

 外边距典型应用

外边距可以让块级盒子水平居中,但是必须满足两个条件:
① 盒子必须指定了宽度(width)。
② 盒子左右的外边距都设置为 auto 。

.header{ width:960px; margin:0 auto;}
1.7 外边距典型应用
常见的写法,以下三种都可以:
 margin-left: auto; margin-right: auto;
 margin: auto;
 margin: 0 auto;


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

外边距合并问题

使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。
主要有两种情况:
1. 相邻块元素垂直外边距的合并
2. 嵌套块元素垂直外边距的塌陷

清除内外边距 


综合案例:

案例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>/* 设置所有组件的默认内外边距为o */* {margin: 0;padding: 0;}/* 设置页面的背景颜色 */body {background-color: #f5f5f5;}img {/* 图片的宽度和父亲一样宽 */width: 100%;}.box{width: 372px;height: 518px;background-color: #fff;/* 设置盒子水平居中 */margin: 100px auto;}.review {height: 70px;/* 内边距左右36 *//* 因为这个段落没有有width属性,所以不会撑开盒子 */padding: 0 36px;/* 上边距 */margin-top: 42px;}.apprise {font-size: 12px;color: #b0b0b0;margin-top: 40px;padding: 0 36px;}.info h4 {/* 将块元素转成行内块 */display: inline-block;margin-top: 25px;margin-left: 36px;/* 不加粗 */font-weight: 400;}.info em {font-style: normal;margin: 0 12px 0 25px;color: #efe4e0;}.info span {font-size: 14px;color: #ff6700;}</style>
</head>
<body><div class="box"><img src="./images/img.jpg" alt=""><p class="review">快递牛,整体不错蓝牙可以说秒连。红米给力</p><div class="apprise">来自于 117384232 的评价</div><div class="info"><h4>Redmi AirDots真无线蓝...</h4><em>|</em><span> 99.9元</span></div></div></body>
</html>

案例总结

1. 布局为啥用不同盒子,我只想用div?
标签都是有语义的, 合理的地方用合理的标签。比如产品标题 就用 h, 大量文字段落就用p


2. 为啥用辣么多类名?
类名就是给每个盒子起了一个名字,可以更好的找到这个盒子, 选取盒子更容易,后期维护也方便。


3. 到底用 margin 还是 padding?
大部分情况两个可以混用,两者各有优缺点,但是根据实际情况,总是有更简单的方法实现。


4. 自己做没有思路?
布局有很多种实现方式,同学们可以开始先模仿我的写法,然后再做出自己的风格。
最后同学们一定多运用辅助工具,比如屏幕画笔,ps等等
 

案例 2 :快报模块

<!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;}.box {width: 250px;height: 165px;border: 1px solid #cccccc;/* 水平居中 */margin: 100px auto;}.box h3 {height: 32px;/* 不加粗 */font-weight: 400;font-size: 14px;/* 底边框虚线 */border-bottom: 1px dotted #cccccc;/* 文字垂直居中对齐 */line-height: 32px;/* 左外边距15像素 */padding-left: 15px;       }.box ul li a {font-size: 12px;color: #666666;/* 去下划线 */text-decoration: none;}/* 鼠标悬停时触发 */.box ul li a:hover {/* 添加下划线 */text-decoration: underline;}/* 去点li的点 */li {list-style: none;}.box ul li {height: 23px;line-height: 23px;padding-left: 20px;;}.box ul {margin-top: 7px;}</style>
</head>
<body><div class="box"><h3>品优购快报</h3><ul><li class="one"><a href="#" >【特惠】爆款耳机5折秒!</a></li><li><a href="#">【特惠】爆款耳机5折秒!</a></li><li><a href="#">【特惠】爆款耳机5折秒!</a></li><li><a href="#">【特惠】爆款耳机5折秒!</a></li><li><a href="#">【特惠】爆款耳机5折秒!</a></li></ul></div>
</body>
</html>

 新知识点: 去掉 li 前面的 项目符号(小圆点)

list-style: none;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/218378.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

掌握魔法绘制图片、PDF剪辑器功能,智能生成AI文章,高效工作从此开始

在这个信息爆炸的时代&#xff0c;如何高效地处理和利用各种文件格式成为了我们日常工作的关键。今天&#xff0c;我们将为您介绍一款强大的工具&#xff0c;它能够智能生成AI文章&#xff0c;高效掌握魔法绘制图片和PDF剪辑器功能&#xff0c;为您的工作带来前所未有的便捷和高…

互联网加竞赛 python+opencv+机器学习车牌识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于机器学习的车牌识别系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;3分 该项目较为新颖&#xff0c;适…

解决:AttributeError: ‘dict’ object has no attribute ‘has_key’

解决&#xff1a;AttributeError: ‘dict’ object has no attribute ‘has_key’ 文章目录 解决&#xff1a;AttributeError: dict object has no attribute has_key背景报错问题报错翻译报错位置代码报错原因解决方法方法一方法二方法三今天的分享就到此结束了 背景 在使用之…

java导出word使用模版与自定义联合出击解决复杂表格!

1. 看一下需要导出什么样子的表格 如图所示&#xff0c;这里的所有数据行都是动态的&#xff0c;需要根据查询出来的数据循环展示。 如果只是这样的话&#xff0c;使用freemarker应该都可以搞定&#xff0c;但是他一列中内容相同的单元格&#xff0c;需要合并。 这对于表格样式…

Cosmopolitan Libc:让 C 语言一次构建、随处运行 | 开源日报 No.109

jart/cosmopolitan Stars: 12.9k License: ISC Cosmopolitan Libc 使 C 成为一种构建一次运行在任何地方的语言&#xff0c;就像 Java 一样&#xff0c;但它不需要解释器或虚拟机。相反&#xff0c;它重新配置了标准 GCC 和 Clang 以输出符合 POSIX 标准的多语言格式&#xff…

MySQL的事务以及springboot中如何使用事务

事务的四大特性&#xff1a; 概念&#xff1a; 事务 是一组操作的集合&#xff0c;它是不可分割的工作单元。事务会把所有操作作为一个整体&#xff0c;一起向系统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 注意&#xff1a; 默认MySQ…

【网络安全】HTTP Slowloris攻击原理解析

文章目录 Slowloris攻击的概念Slowloris攻击原理Slowloris攻击的步骤其他的DDoS攻击类型UDP FloodICMP (Ping) FloodSYN FloodPing of DeathNTP AmplificationHTTP FloodZero-day DDoS 攻击 推荐阅读 Slowloris攻击的概念 Slowloris是在2009年由著名Web安全专家RSnake提出的一…

教育数字化转型 赋能家庭场景自主学习习惯养成

北京市气象台12月12日22时升级发布暴雪橙色预警信号&#xff0c;北京市教委决定自12月13日开始&#xff0c;全市中小学幼儿园采取学生临时居家学习措施。自疫情以来&#xff0c;家庭已经成为另一个学习中心&#xff0c;学校不再是教育的孤岛。 学习方式的变革&#xff0c;数字…

Etcd实战(二)-k8s集群中Etcd数据存储

1 介绍 k8s中所有对象的manifest都需要保存到某个地方&#xff0c;这样他们的manifest在api server重启和失败的时候才不会丢失&#xff0c;因此引入了etcd。在k8s中只有api server和etcd直接交互&#xff0c;其它组件都通过api server间接和etcd交互&#xff0c;这样做的好处…

目标检测锚框

目标检测锚框 最开始呢&#xff0c;我们需要先介绍一下框&#xff0c;先学会一下怎么画框 导入所需要的包 from PIL import Image import d2lzh_pytorch as d2l import numpy as np import math import torch展示一下本次实验我们用到的图像&#xff0c;猫狗 d2l.set_figsiz…

python自动化测试实战 —— WebDriver API的使用

软件测试专栏 感兴趣可看&#xff1a;软件测试专栏 自动化测试学习部分源码 python自动化测试相关知识&#xff1a; 【如何学习Python自动化测试】—— 自动化测试环境搭建 【如何学习python自动化测试】—— 浏览器驱动的安装 以及 如何更…

Linux shell编程学习笔记35:seq

0 前言 在使用 for 循环语句时&#xff0c;我们经常使用到序列。比如&#xff1a; for i in 1 2 3 4 5 6 7 8 9 10; do echo "$i * 2 $(expr $i \* 2)"; done 其中的 1 2 3 4 5 6 7 8 9 10;就是一个整数序列 。 为了方便我们使用数字序列&#xff0c;Linux提供了…

理解Socket

前言 我在去年就学习过Java中Socket的使用&#xff0c;但对于Socket的理解一直都是迷迷糊糊的。看了网上很多关于Socket的介绍&#xff0c;看完还是不太理解到底什么是Socket&#xff0c;还是很迷。直到最近在学习计算机网络&#xff0c;我才对Socket有了一个更深地理解。之前一…

5. PyTorch——数据处理模块

1.数据加载 在PyTorch中&#xff0c;数据加载可通过自定义的数据集对象。数据集对象被抽象为Dataset类&#xff0c;实现自定义的数据集需要继承Dataset&#xff0c;并实现两个Python魔法方法&#xff1a; __getitem__&#xff1a;返回一条数据&#xff0c;或一个样本。obj[in…

uniapp框架——初始化vue3项目(搭建ai项目第一步)

文章目录 ⭐前言&#x1f496; 小程序系列文章 ⭐uniapp创建项目&#x1f496; 初始化项目&#x1f496; uni实例生命周期&#x1f496; 组件生命周期&#x1f496; 页面调用&#x1f496; 页面通讯&#x1f496; 路由 ⭐搭建首页⭐form表单校验页面⭐总结⭐结束 ⭐前言 大家好…

以pycharm为例,生成Python项目所需要的依赖库/包文档:requirements.txt

平时我们在编写或者使用别人的Python项目时&#xff0c;往往会看到一个文档requirements.txt&#xff0c;该文档是描述一个Python项目中的第三方库的名称以及版本。本文介绍导出python当前项目依赖包requirements.txt的操作步骤。 方法一&#xff1a;如果每个项目有对应的虚拟…

【SpringBoot】配置文件

配置文件官网 1. 配置方式 application.propertiesapplication.yml / application.yaml 2. 自定义配置信息 将实体类中的本应该写死的信息写在属性配置文件中。 可以使用 Value("${键名}") 获取&#xff0c;也可以使用 ConfigurationProperties(prefix"前…

java SSM酒店客房管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM酒店客房管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代 码和数据库&#xff0c;系统主要采…

LAMP平台——构建PHP运行环境

在构建LAMP平台时&#xff0c;各组件的安装顺序依次为Linux、Apache、MySQL、PHP。其中Apache和 MySQL的安装并没有严格的顺序&#xff1b;而PHP环境的安装一般放到最后&#xff0c;负责沟通Web服务器和数据库 系统以协同工作。 PHP 即 Hypertext Preprocessor&#xff08;超级…

python 爬虫 m3u8 视频文件 加密解密 整合mp4

文章目录 一、完整代码二、视频分析1. 认识m3u8文件2. 获取密钥&#xff0c;构建解密器3. 下载ts文件4. 合并ts文件为mp4 三、总结 一、完整代码 完整代码如下&#xff1a; import requests from multiprocessing import Pool import re import os from tqdm import tqdm fro…