css --- [读书笔记] 盒模型(边框、内外边距)

说明

  • 源代码
  • 学习

盒子模型(css重点)

css学习三大重点: css盒子模型、 浮动、 定位

  • 目标:
    • 能说出盒子模型由哪四部分组成: 内容、边框、内外边距
    • 能说出内边距的作用,设置不同数值分别代表的意思: 控制内部块级元素和宽框的距离
    • 能说出块级盒子居中对齐需要的2个条件
    • 能说出外边距合并的解决办法
  • 应用:
    • 能利用边框复合写法给元素添加边框
    • 能计算盒子的实际大小
    • 能利用盒子模型布局模块案例

1. 看透网页布局的本质

  • 看透网页布局的本质:
    • 首先利用CSS设置好盒子的大小,然后摆放盒子的位置
    • 最后把网页元素(文字、图片等)放入盒子里面

2. 盒子模型(Box Model)

  • 所谓盒子模型:
    • 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.

3. 盒子边框 (border)

3.1 边框重叠

  • 两个单元格之间的边框会出现重叠,从而使边框变粗
table{border-collapse: collapse;
}
  • collapse 单词是合并的意思
  • 以上属性表示相邻的边框合并在一起
table{border-collapse: collapse;
}

4. 内边距 (padding)

  • 内容与边框的距离
  • 会改变盒子的大小
div{width: 200px;height: 200px;border: 1px solid red;padding: 10px 20px;
}
  • 此时的盒子高度是220px,宽度是220px
  • padding的值按顺时针安利

4.1 要求盒子的左边内边距是5像素

padding-left: 5px;

4.2 要求简写的形式写出一个盒子上下是25像素,左右是15像素

padding: 25px 15px;

4.3 简写的形式写出一个盒子上内边距是12像素下内边距是0左内边距是25右内边距是10

paddding: 12px 10px 0 25px

4.4 字数不一样的导航栏制作解决方案

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style>.nav {width: 100%;height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #ebeef0;background-color: #fcfcfc;}.nav a {text-decoration: none;color: black;display: inline-block;padding: 0 15px;height: 41px;line-height: 41px;font-size: 16px;}.nav a:hover {background-color: rgba(0, 0, 0, 0.2);}</style></head><body><div class="nav"><a href="#">一</a><a href="#">两字</a><a href="#">三个字</a><a href="#">我是四字</a><a href="#">我有五个字</a><a href="#">我只有六个字</a></div></body>
</html>
  • 盒子的实际大小 = 内容宽度 + 内边距 + 边框

4.5 padding值不撑开盒子

  • 如果盒子没有指定宽度或者高度,那么padding值不会撑开宽度或高度
<style>div{width: 100px;height: 100px;background-color: pink;}div p{height: 30px;background-color: purple;padding: 15px;}
</style>
<body><div><p>我不会撑开p盒子的宽高 </p></div>
</body>

5. 外边距 (margin)

  • 盒子与盒子之间的距离

5.1 块级盒子水平居中对齐

  • 一般用于最外层的盒子,让页面的大部分信息始终在屏幕中心.
<style>div{width: 600px;height: 600px;margin: 0 auto;background-color:pink;}
</style>
<body><div></div>    
</body>

5.2 常见的行内块

  • img
  • input
  • 单元格

5.3 行内元素和块级元素的居中对齐

  • text-align:可以让行内元素,行内块元素水平对齐
  • margin: 0 auto:可以让块级盒子水平居中
<style>div{width: 600px;height: 300px;background-color: pink;margin: 0 auto;text-align: center;}
</style>
<body><div>稳住<strong>我们能赢</strong><input type="text"></div>
</body>

5.4 插入图片和背景图的位置移动

  • 插入图片: 通常用于产品展示,移动位置靠盒模型(padding margin)
  • 背景图片 : 一般是小图标背景或超大背景图, 移动位置只能靠 background-position
img {width: 200px;height: 210px;margin: 5px;
}
div {width: 400px;height: 400px;background: url(...) no-repeat;/* x方向移动30像素 y方向移动50像素 */background-position: 30px 50px;
}

5.5 外边距的合并

  • 1)垂直外边距合并(左右并不会出现)
.top{margin-bottom: 100px;
}
.bottom{margin-top: 50px;
}
<div class="top">
<div class="bottom">

此时,上面的盒子和下面的盒子距离为: 50px, 即上下外边距会取较大值

  • 2)两个嵌套的块级盒子模型
<div class="container"><p class="inner"></p>
</div>

如果给父元添加上内边距会是整个容器的高度变大

如果使用子元素的上外边距.会使父元素和子元素全部向下移动对应的距离

正确做法如下:

.container{width: 500px;height: 500px;background-color: marron;border-top: 1px solid transparent;
}
.inner {width: 50px;height: 50px;background-color: skyblue;margin-top: 50px;
}

补充: 盒子阴影的参数(CSS3)

box-shadow: x y 阴影虚实 阴影尺寸 阴影颜色 内/外阴影

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

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

相关文章

Java 泛型，你了解类型擦除吗？

Java 泛型，你了解类型擦除吗？

泛型&#xff0c;一个孤独的守门者。大家可能会有疑问&#xff0c;我为什么叫做泛型是一个守门者。这其实是我个人的看法而已&#xff0c;我的意思是说泛型没有其看起来那么深不可测&#xff0c;它并不神秘与神奇。泛型是 Java 中一个很小巧的概念&#xff0c;但同时也是一个很…
阅读更多...
css --- [读书笔记] 浮动(float) 与 清除浮动

css --- [读书笔记] 浮动(float) 与 清除浮动

说明 源代码学习 1. 浮动 1.1 CSS布局的三种机制 网页布局的核心 — 利用 CSS 来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置: 标准流、浮动和定位. 标准流: 块级元素(div、hr、p、h1~h6、ul、ol、dl、form、table)会独占一行,从上向下顺序排列行内元素(span、a、i、em)…
阅读更多...
Shiro身份认证---转

Shiro身份认证---转

目录1.Shro的概念2.Shiro的简单身份认证实现3.Shiro与spring对身份认证的实现前言&#xff1a; Shiro 可以非常容易的开发出足够好的应用&#xff0c;其不仅可以用在 JavaSE 环境&#xff0c;也可以用在 JavaEE 环境。Shiro 可以帮助我们完成&#xff1a;认证、授权、加密、会话…
阅读更多...
模板 Trie树

模板 Trie树

模板 Trie树 code&#xff1a; #include <iostream> #include <cstdio>using namespace std;const int wx20017;inline int read(){int sum0,f1; char chgetchar();while(ch<0||ch>9){if(ch-)f-1; chgetchar();}while(ch>0&&ch<9){sum(sum<…
阅读更多...
css --- [练手小项目]样式小结(字体、颜色的语义 清除浮动的使用)

css --- [练手小项目]样式小结(字体、颜色的语义 清除浮动的使用)

说明 源代码 1.1 CSS属性书写顺序(重点) 建议遵循以下顺序: 1.布局定位属性: display / position / float / clear / visibility / overflow (建议display第一个写, 毕竟关系到模式) 2.自身属性: width / height / margin / padding / border / background 3.文本属性: co…
阅读更多...
《Hive编程指南》14.3 投影变换的实践出错原因分析

《Hive编程指南》14.3 投影变换的实践出错原因分析

自己在学习14.3节投影变换执行SQL语句hive (default)> SELECT TRANSFORM(col1, col2) USING /bin/cut -f1 AS newA, newB FROM a;时出现了这个错误 Ended Job job_local1231989520_0004 with errors Error during job, obtaining debugging information... FAILED: Executi…
阅读更多...
链式前向星（转）

链式前向星（转）

转自大佬博客https://blog.csdn.net/ACdreamers/article/details/16902023 我们首先来看一下什么是前向星. 前向星是一种特殊的边集数组,我们把边集数组中的每一条边按照起点从小到大排序,如果起点相同就按照终点从小到大排序, 并记录下以某个点为起点的所有边在数组中的起始位…
阅读更多...
javascript --- [FormData的使用] 表单元素转换成表单 对象二进制文件上传

javascript --- [FormData的使用] 表单元素转换成表单 对象二进制文件上传

1. FormData的作用 1.1 将Form表单元素,转换成表单对象 在使用Ajax进行表单提交的时候,采用原生的js获取dom,然后添加属性.当表单项很多的时候,代码会很多.不利于后期阅读、维护. 这时,可以使用FormData对象,将HTML中的表单元素转换成表单对象,如下: <!-- 表单对象 -->…
阅读更多...
android studio gradle 国内代理

android studio gradle 国内代理

使用阿里云的国内镜像仓库地址&#xff0c;就可以快速的下载需要的文件 修改项目根目录下的文件 build.gradle &#xff1a; buildscript { repositories { maven{ url http://maven.aliyun.com/nexus/content/groups/public/} } } allprojects { …
阅读更多...
爬虫—01-爬虫原理与数据抓取

爬虫—01-爬虫原理与数据抓取

爬虫的更多用途 12306抢票 网站上的头票 短信轰炸关于Python网络爬虫&#xff0c;我们需要学习的有&#xff1a; Python基础语法学习&#xff08;基础知识&#xff09;对HTML页面的内容抓取&#xff08;数据抓取&#xff09;对HTML页面的数据提取&#xff08;数据提取&#xff…
阅读更多...
javascript --- [FormData的使用] 文件上传进度条展示 文件上传图片即使预览

javascript --- [FormData的使用] 文件上传进度条展示 文件上传图片即使预览

1. 准备工作 因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问. 1.1 静态资源 使用express将public下面的资源暴露出来在根目录下面新建一个public文件夹和一个app.js文件 // app.js con…
阅读更多...
2018年春阅读计划---阅读笔记4

2018年春阅读计划---阅读笔记4

uml图的几大特点&#xff1a;容易掌握 2.面向对象 3.可视化&#xff0c;表达能力强大 4.容易掌握使用 5.与编程语言的关系。用c&#xff0c;java等编程语言可以实现一个系统&#xff0c;支持uml 的一些工具&#xff0c;可以根据uml所建立的系统模型自动产生代码框架。 uml的5类…
阅读更多...
TP5之安全机制

TP5之安全机制

防止sql注入 1、查询条件尽量使用数组方式&#xff0c;具体如下&#xff1a; 1 $wheres array(); 2 3 $wheres[account] $account; 4 5 $wheres[password] $password; 6 7 $User->where($wheres)->find(); 2、如果必须使用字符串&#xff0c;建议使用预处理机制&am…
阅读更多...
javascript --- [jsonp] script标签的妙用(绕过同源限制)

javascript --- [jsonp] script标签的妙用(绕过同源限制)

1. 同源 1.1 什么是同源 协议、域名、端口号相同 1.2 为什么有同源政策 同源政策是为了保护用户信息的安全,放置恶意的网站窃取数据。最初的同源政策是指A网站再客户端设置的Cookie,B网站是不能访问的. 随着互联网的发展,同源政策也越来越严格,在不同源的情况下,其中有一项…
阅读更多...
SQL登录报错

SQL登录报错

在安装完SQL后&#xff0c;发现报出了error40和53的错误&#xff0c;作为小白的我也是一脸懵逼&#xff0c;明明一切都是按照默认加下一步安装的&#xff0c;为什么到了连接数据库的时候就出现了问题呢&#xff1f; 后来经过调查&#xff0c;发现需要将sql配置管理的ip中的一项…
阅读更多...
复活

复活

此刻--复活转载于:https://www.cnblogs.com/lyqlyq/p/9881646.html
阅读更多...
javascript --- 瀑布流的实现

javascript --- 瀑布流的实现

说明 源代码 1. 瀑布流 出现问题: 设计给的图片不是同一个尺寸大小,因此不能规则的放入到给定的DOM结构中.此时,需要使用瀑布流技术来解决这个问题 解决的思路: 让图片等宽、不等高 核心: 用到了定位 img {position: absolute;left: 最小的索引 * 图片的宽度;top: 最小的图…
阅读更多...
不同权限访问详细细节

不同权限访问详细细节

1 package com.package1;2 3 /**4 * 程序执行入口和调用方法在不同类但在同一个包中&#xff0c;除了private方法&#xff0c;其他任何权限的方法都可以都可相互调用5 * author Administrator6 *7 */8 public class Source {9 public static void main(String[] args) …
阅读更多...
洛谷P2822组合数问题

洛谷P2822组合数问题

传送门啦 15分暴力&#xff0c;但看题解说暴力分有30分。 就是找到公式&#xff0c;然后套公式。。 #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> using namespace std;long long read(){char ch;bool f false;wh…
阅读更多...
基于Docker的GoldenGate部署

基于Docker的GoldenGate部署

前言Docker最近几年异常火爆&#xff0c;主要是因为其方便、快捷、轻量&#xff0c;相对于VM&#xff0c;它不需要占用太多资源&#xff0c;随时可以创建、删除&#xff0c;或在已有image上添加一些软件&#xff0c;再制作成另一个模板image供日后使用。Docker提供的Hub或priva…
阅读更多...
最新文章

Copyright @ 2022~2023