CSS基础知识: 框架
CSS基础知识整理 框架 box
文章目录
- CSS基础知识整理 框架 box
- 长度单位
- 颜色单位
- 框架（盒子）
- 边框 border
- 外边距 margin
- 外边距和并（垂直布局）
- overflow
- 高度和宽度
- 注：知识整理为w3school以及硅尚谷视频所学，可前往详细学习
2136周 学习日志
长度单位
- 像素（pixel） pxpxpx
- 像素越小越清晰
- 同样的像素大小在不同显示设备上显示不同
- 百分比 %
- 可以设置属性为其父元素的百分比，可以使子元素随父元素改变
- ememem
- 相对于元素字体大小计算
- 1em=11em=11em=1 font−size{font-size}font−size，font−size{font-size}font−size默认为16px
- ememem根据字体大小改变
- remremrem
- 相对于根元素（HTML）字体大小来计算
- 相对单位：px/em/ex/%px / em / ex / \%px/em/ex/%
绝对单位：cm/pt/in/pc/mmcm / pt / in / pc / mmcm/pt/in/pc/mm - 1in = 2.54cm = 25.4 mm = 72pt = 6pc
颜色单位
颜色名
RGB（RGBA）
rgb(red,green,blue)rgb(red,green,blue)rgb(red,green,blue)，值为：0%-100%或0-255
rgbargbargba(r, g, b, 不透明度：0~1)
HEX
- #rgbrgbrgb，十六进制，取值00~ffffff（即大小为0-255）
- 形式为#aabbccaabbccaabbcc时，可简写为#abcabcabc
HSL（HSLA）
- hslhslhsl（色相：0-360，饱和度：0%-100%，亮度：0%~100%）
- hslahslahsla(h, s, l, 不透明度：0~1)
框架（盒子）
- content，border，padding，margin
- 内容 - 框的内容，其中显示文本和图像。
- 内边距 - 清除内容周围的区域。内边距是透明的。
- 边框 - 围绕内边距和内容的边框。
- 外边距 - 清除边界外的区域。外边距是透明的。
- 外边距可以是负值，而且在很多情况下都要使用负值的外边距
- 使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来
- 元素的总宽度应该这样计算：
- 元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
- 元素的总高度应该这样计算：
- 元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
边框 border
border-style：
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
- 混合边框：
- 设置一到四个值（用于上边框、右边框、下边框和左边框）
- 两个值：上下 左右
- 三个值：上 左右 下
- 常对单独的边设置border-top-style（right，bottom，left）
border-width
- border-top-width（right，bottom，left）
border-color
- 如果未设置 border-color，则它将继承元素的颜色
border-radius：圆角边框（轮廓）
- 1~4个值（自己感受区别）
简写属性：border
- 是以下各个边框属性的简写属性：border-width，border-style（必需），border-color，无顺序要求
外边距 margin
margin-top，margin-right，margin-bottom，margin-left
属性：
- auto - 浏览器来计算外边距
- length - 指定外边距
- % - 指定以包含元素宽度的百分比计的外边距
- inherit - 指定应从父元素继承外边距
- 允许负值
一般设置左、上会移动自身（正值向右、向下移动，负值向左、向上移动）
一般设置右、下会移动其他盒子值的个数与对应设置
将 margin 属性设置为 auto，以使元素在其容器中水平居中。然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配（水平布局）
水平布局：
margin-left，border-left，padding-left，content，padding-right，border-right，margin-right之和等于父元素内容区宽度
不够自动调整margin-right使成立
设置auto值：width（默认为内容的），margin-left，margin-right（默认为margin-right）调整
元素水平居中
inherit值，继承父类对应值
外边距和并（垂直布局）
默认情况下，父元素不设置高度，其高度被子元素撑开（跟随子元素高度变化）
子元素溢出：子元素在父元素内容区排列的，如果子元素高度超过了父元素，子元素溢出。通过overflow处理溢出。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
兄弟关系：合并后的外边距的高度等于两个发生合并的外边距的高度中的绝对值较大者。（一正一负为两者之和）
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
父子关系：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
如果这个外边距遇到另一个元素的外边距，它还会发生合并
- 这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
- 外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
- 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
overflow
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值：
- visible - 默认。溢出没有被剪裁。内容在元素框外渲染
- hidden - 溢出被剪裁，其余内容将不可见
- scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
- auto - 与 scroll 类似，但仅在必要时添加滚动条
overflow 属性仅适用于具有指定高度的块元素。
内边距 padding
- padding-top，padding-right，padding-bottom，padding-left
- length，% ，inherit
- 不允许负值
- 简写属性
内边距和元素宽度
- CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。
- 因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。
- 若要将宽度保持为定值，无论填充量如何，可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。
高度和宽度
height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。
auto（默认）、length（px等）、% 、initial（ 将高度/宽度设置为默认值），inherit （从其父值继承高度/宽度)
设置 max-width
可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。
对于设置width，当浏览器窗口小于设定的width宽度时，浏览器会将水平滚动条添加到页面。在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理，灵活调整。
max-width 属性的值将覆盖 width（宽度）
指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。
对于设置width，当浏览器窗口小于设定的width宽度时，浏览器会将水平滚动条添加到页面。在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理，灵活调整。
max-width 属性的值将覆盖 width（宽度）
注：知识整理为w3school以及硅尚谷视频所学，可前往详细学习
返回目录
CSS基础知识: 框架相关推荐
- css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
- html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
- HTML+CSS基础知识5
HTML+CSS基础知识5 30.`<strong>`.`<em>`和`<b>`.`<i>`标签的区别 31.引用标签 32.iframe嵌套页面 33 ...
- 前端开发入门：html和css基础知识回顾2
HTML+CSS基础知识 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
- HTML/CSS基础知识（四）
WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...
- HTML+CSS基础知识简单版
HTML+CSS基础知识简单版 一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
- CSS基础知识（一）：选择器
文章目录 前言 一.CSS基础知识 二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
- 计算机知识怎么做框架,计算机基础知识框架.ppt
<计算机基础知识框架.ppt>由会员分享,可在线阅读,更多相关<计算机基础知识框架.ppt(25页珍藏版)>请在装配图网上搜索. 1.计算机基础知识讲座,硬件组成 软件系统 网 ...
最新文章
- Java语言的基础知识9
- Yolov5总结文档(理论、代码、实验结果)
- ctrl+shift+l指定选择 vscode_6.PYTHON开发利器之VS Code常用配置介绍
- 数据科学教程：R语言与DataFrame[2016版]
- 框架鲜花商城系统测试_分销、团购、秒杀、优惠券小程序商城源码免费分享（Java语言）...
- [蓝桥杯][历届试题]连号区间数
- 拼图项目的动机和目标
- 计算机组成原理笔记第十章笔记整理
- MySQL workbench创建用户与授权
- 【优化算法】海鸥优化算法（SOA）【含Matlab源码 1099期】
- 图书管理系统（课程设计）
- 手游php,PHP响应式手游APP软件游戏中心下载网站整站源码(自适应手机移动端) dedecms内核...
- 一个服务器多个网站收录效果,8个优化小技巧快速提高网站收录
- linux下好用的chm阅读器
- php判断学生姓名,【PHP】百家姓姓名判断
- 原神启动器无法打开，提示“no Qt platform plugin could be initialized”的解决办法
- Kubectl常用命令（三）
- 追光而遇，沐光而行：相约未来GIS实验室
- SAP MDG和SAP MDM的区别
- 第四章 微服务容错Resilience4j