- 基本点
- 实操步骤
- 实践笔记
- 方法1：100%方法
- 该方法要求具备html、body标签
- 加fixed就没有滚动条了，
- 方法2：vh、vw方法
- 该方法要求IE9以上
- 盒模型
- 元素分类
- 布局
- 伪类和伪元素
- 属性详解
- auto：(默认值)不调整背景图片大小，一直复制直到覆盖整个容器（容器由内容决定，自适应内容），如果不能刚好满足，图片会被咔擦
- 百分比
- 覆盖：按比例调整背景图片，这个属性值跟contain正好相反，背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话，那么背景图片就会被咔嚓。
- 包含：按比例调整背景图片，使得其图片宽高比自适应整个元素的背景区域的宽高比，因此假如指定的图片尺寸过大，而背景区域的整体宽高不能恰好包含背景图片的话，那么其背景某些区域可能会有空白
- length
- 兴趣探索
- 待解决问题
基本点
- 先安排总体布局
- 拿一张草稿纸，详细分析好、确定布局，建立不同的css
- 从网上找reset+自己手动改,比如颜色
- 进入具体小布局-
- 该布局选用：传统定位/弹性盒子定位
- 行级元素有哪些？盒子类型是border-sizing还是content-sizing?推荐使用前者
- width/height
- padding
- margin
- ps:觉得确实没有问题的先不管，因为可能是浏览器的延迟
实践笔记
- 怎么设置全屏
方法2：vh、vw方法
该方法要求IE9以上
.bg{ background-color: #070d82; width: 100vw; height: 100vh; position: fixed; }
- 要滚动条```htmlbody, html{margin: 0px;padding: 0px;}.bg{# 下面两个二选一background-size : auto auto;background-repeat: repeat-x repeat-y;}
盒模型
基本点
- 简介
- CSS处理网页时，它认为每个HTML元素都包含在一个不可见的盒子里。
- 网页布局就是摆放盒子。
- 作用
- 设计、布局
- 组成
- margin外边距：透明
- border边框
- padding内边框：透明
- content内容
- box-sizing属性
- content-box(W3C盒模型)
- 功能：属性width，height只包含内容content，不包含border和padding
- 适用：chrome
- border-box(IE盒模型)
- 功能：属性width，height包含content、border和padding
- 适用：IE
- content-box(W3C盒模型)
- width与height
- width：100%
- 子元素一定会从父元素的content的左上角开始定位
- 父元素无需设置width（这是因为浏览器会自动计算窗口宽度），也可以随便怎么设置
- 不好用，一般不用
- 100vh,vh是相当于视窗的高度(满高是100vh)
- height:100%
- 子元素一定会从父元素的content的左上角开始定位
- 父元素的height需要为固定值或者百分比，不能为auto，也不能没有。（这是因为浏览器不会自动计算窗口高度，父元素如果不设置高度，就是auto，这会是undefind值，可以给父元素的height设置一个100%去解决。）
- 子元素非绝对定位时，根据父元素的height计算百分比；绝对定位时，宽高百分比的计算是相对于第一个非static组先的padding-box，如果没有就是body。
- 100vw,vw是相当于视窗的宽度(满宽是100vw)
- width:auto（即自适应）
- 不设置width时，默认为auto
- 在宽度上，子元素将占满父元素的content
- height:auto
- 不设置height时，默认为auto
- 在高度上，子元素根据自身内容动态调节height（如果没有内容，height会为0），和父元素无关
- 当position不同时显示效果不同，浮动可能会导致其不显示，需要清除浮动
- width：100%
- 子元素设置margin-top后，父元素跟随下移的问题
- 每个块级元素都会独占一行
- 在不设置块级元素宽度的情况下，其宽度和父容器的宽度保持一致
- 设置块级元素的盒模型属性都是有效的
外边距合并:当两个块级元素在垂直方向上相遇,如果上面的元素有margin-bottom,下面的元素有margin-top,则两者间距不是它们的和,而是它们的较大值.
使用
常用标签：
,,
…
,
- ,
-
内联元素
特点
不能独占一行,和其它元素在同一行
- 元素的宽高就是它包含内容的宽高,不可改变
对内联元素设置width，heigth,以及垂直方向上的margin和padding无效,其中垂直方向上的padding会对显示有影响,对周围元素没有影响
使用
常用的内联标签有：,,
设置display:inline；可以将块级元素转换为内联元素
内联块状元素
特点
和其它元素都在一行上
-
使用
常用的内联块状标签有：
, ,
- float:left/right; position: absolute/fixed;display:inline-block;可以将元素设置为内联块级元素（BFC）
布局
传统布局
传统布局中涵盖了普通流、绝对定位、float，三种不同的定位方案，注意区分
通过position定位
position取值
- absolute绝对定位
- 脱离标准文档流进行定位,定位的起始位置为最近的position不为static父元素,否则为body文档本身.
- 不设置top…,也会脱离文档流
- 使用绝对定位，会转换成block块级元素
- relative相对定位
- 不脱离文档流,在文档流中改变自身的位置,定位的起始位置为此元素原先在文档流中的位置.
- fixed固定定位
- 脱离文档流定位,根据浏览器窗口定位,不随滚动条滚动改变
- static默认布局
- 按正常的页面流进行布局,由浏览器自主决定不能使用五大属性
- 子元素始终从父元素的左weight和上height开始定位
- sticky
- 是relative和fixed的结合
- 当页面滚动，父元素开始脱离浏览器视口时(即部分不可见)（没有父元素就会以body为父元素），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时(即完全不可见)，fixed定位自动切换回relative定位。
- 要设置top、left、right、bottom中的任意一个才可以生效（z-index是不行的）
- absolute绝对定位
与position关联的5大属性
属性值
- none：默认值，不浮动
- inherit：继承父元素的float属性
- left：向左浮动
- right：向右浮动
- 特点
- float会自动将元素设置为块级元素
- 一个浮动的元素，如果没有设置宽高，那么将自动收缩为内容的宽高
- 对于块级元素，如果不给它设置宽高，它会霸占一整行，如果设置了float，它会收缩为内容的宽高。
- float可以实现字围效果
- 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
- 举例
- 把div2、div3、div4都设置成左浮动
- 举例
- 把div2、div4左浮动，发现div2和1的底部对齐，div4和3的底部对齐- ps:为了避免过于复杂，要么都浮动，要么不浮动- flex-direction
- 含义：容器内子元素的排列方向
- 属性值：row(默认) | row-reverse | column | column-reverse;
- flex-wrap
- 含义：元素放不下了是否换行
- 属性值：wrap（默认）| no-wrap（如果放不下，容器会按比例缩小） | wrap-reverse（第一行放在最下面）
- flex-flow
- 1和2的简写
- justify-content
- 含义：定义了项目在主轴上的对齐方式
- 属性值：flex-start(行头紧挨着填充)| flex-end(行尾紧挨着填充) | center(居中紧挨着填充)|space-between(项目均匀分布，两边没有间隙)| space-around(项目均匀分布，两边留有一半的间隔空间)|space-evenly(项目均匀分布，两边留有间隙)
- align-items
- 含义：定义了项目在交叉轴上如何对齐
- 属性值：flex-start(行头紧挨着填充)| flex-end(行尾紧挨着填充) | center(居中紧挨着填充)|stretch|baseline(以第一行文字为中心进行对齐)
align-content
order: -1;
- 功能：定义项目的排列顺序。
- 含义：数值越小，排列越靠前，默认为0
- flex-grow: 2;
- 功能：定义剩余空间分配比例。
- 含义：
- 默认为0，即如果存在剩余空间，也不放大。（负数和0效果相同）
- 将所有正整数相加得到分母sum，每个属性的数值作为分子，然后乘以剩余空间
- flex-shrink
- 功能：为不够的控件定义缩小比例。
- 含义
- 默认为1，即如果空间不足，该项目将缩小。
- 将所有正整数相加得到分母sum，每个属性的数值作为分子，然后乘以超出空间
- align-self
- 功能：允许脱离团队
- 含义：
- 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
- 如果定义了,就将覆盖align-items属性。
- flex-basis
- grid-template-columns
- 想要几列写几列
- 例
- grid-template-columns：100px 100px 100px;
- grid-template-columns：repeat(3, 100px);
- grid-template-columns：repeat(3, 1fr);
- grid-template-columns：1fr 2fr 1fr;
- grid-template-columns：repeat(auto-fill, 100px);
- grid-template-columns：1fr minmax(150px, 1fr);
- grid-template-columns：100px auto 100px;
- grid-template-columns：[c1]100px 100px 100px;
- grid-template-rows
- 想要几行写几行
- gap
- 间距，行和列同时设置
- row-gap
- row-gap: 20px;
- colum-gap
- grid-template-areas
- 作用：分区
- 例：
- grid-template-areas：’a b c’ ‘d e f’ ‘g h i’
- grid-template-areas：’a a a’ ‘b b b’ ‘c c c’
- grid-template-areas：’a . a’ ‘b . b’ ‘c . c’ //点代表该区域不能被利用
- grid-auto-flow
- 作用：先行后列放置，还是先列后行放置
- 例子：
- grid-auto-flow:row | column
- justify-items
- 作用：各区的行对齐方式
- 取值：start | end | center | stretch
- align-items
- 作用：各区的列对齐方式
- 取值：start | end | center | stretch
- justify-content
- 作用：整个内容区域的行对齐方式
- 取值：start | end | center | stretch | space-around | space-between | space-evenly
- align-content
- 作用：整个内容区域的列对齐方式
- 取值：start | end | center | stretch | space-around | space-between | space-evenly
- grid-auto-columns, grid-auto-rows
- 作用：设置多出来的项目的宽和高
- 取值：XXpx
- 设置line-height = height
- 如果是P标签，注意设置P标签的margin为0
- 让父元素弹性布局，并设置flex-direction为column列，并设置justify-content为center
- 父元素设置relative，子元素设置absolute，top:50%, tansform:translateY(-50%)
- 将要垂直居中的元素设置为行内元素或者行内块级元素，再在父元素上设置一个after伪元素，使它的高度和父元素的高度相等，宽度为0，且vertical-align为middle，以此调整父元素的基线，再给目标元素也设置vertical-align:middle，即可达到效果。
- grid??
- 父元素设置display:table，子元素设置display:table-cell和vertical-align:middle
- 含义：Block formatting Context 块级格式化上下文
- 本质
- 是一个隔离的独立容器，容器内的元素和外部的元素不会互相影响
- BFC属于定位方案中的普通流
- 布局规则：
- BFC容器内的元素和外部的元素不会互相影响
- 设置两个BFC，可以避免外边距重叠现象
- 阻止元素被浮动元素覆盖
- 同一个BFC里，
- 可以清除浮动，避免高度塌陷：计算BFC的高度时，浮动元素也参与计算
- 父子元素的边距不会重叠
- BFC容器内的元素和外部的元素不会互相影响
如何触发
功能
- 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的
- 实例: ```css / 未访问的链接 / a:link { color: #FF0000; }
<a name="xeI0b"></a>## 伪元素- 功能- 伪元素用于创建一些不在文档树中的元素，并为其添加样式- 实例```cssa::before{}a::after{}- css规范中要求对伪元素使用双冒号,以此来区别伪元素和伪类,但大多数伪元素也支持单冒号
- 伪元素针对的是不在文档树中的元素的样式,伪类针对的是已有元素根据用户的行为添加对应的样式
属性详解
background属性
background-color
- 作用：设置元素的背景颜色，它从填充从content—->border（所以说padding本身是透明的），不包括margin。
用法
//1、关键字background-color: blue;//2、十六进制background-color: #ff0000;//3、RGBbackground-color: rgb(255,0,255);background-color: rgba(255,255,255,0.2);//a是设置透明度的alpha通道//值越小越接近全透明//3、全透明//实际上background默认的颜色就是透明的属性//不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设 置 transparent 值还是有必要的。background-color:transparent;
background-size
作用：定义背景图片的属性
- 第一个值为设置图片宽度，第二个值为图片的高度；但是不管是用什么值，都不能为负值。
- 兼容性
- 作用：设置属性如何被展示
属性值：
作用：为display 属性为 inline 、inline-block 和 table-cell 的元素设置垂直对齐方式
兴趣探索
为什么会有怪异模式啊？
css有两种模式，即怪异模式和标准模式（严格模式），常用的<!DOCTYPE html>就是标准模式（这一行是文档类型定义（DTD），没有DTD就是怪异模式），早期的浏览器厂商如网景公司和微软公司的Netscape4和IE4，在实现CSS机制时，并没有遵循W3C的标准，然而随着标准一致性变得越来越重要，大家都启用了W3C，而为了兼容过去的网站，就保留了曾经使用的怪异模式。
怪异模式和标准模式有什么区别？
标准模式中IE6不认识!important声明，怪异模式中IE6/7/8都不认识
- 怪异模式的width包含padding、boder、margin
- 怪异模式可以给行内元素设置height和weight
- 怪异模式下，body是根节点；标准模式下，html是根节点
待解决问题
- ,
- ,
，发现234和1的底部对齐，并没有影响1flex布局
基本点
项目属性
其它布局要点
常见的垂直居中方法
/ 已访问的链接 / a:visited { color: #00FF00; }
/ 鼠标悬停链接 / a:hover { color: #FF00FF; }
/ 鼠标点击状态 / a:active { color: #0000FF; }
区别
百分比
background-size: 30% 30%;
覆盖：按比例调整背景图片，这个属性值跟contain正好相反，背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话，那么背景图片就会被咔嚓。
background-size: cover;
包含：按比例调整背景图片，使得其图片宽高比自适应整个元素的背景区域的宽高比，因此假如指定的图片尺寸过大，而背景区域的整体宽高不能恰好包含背景图片的话，那么其背景某些区域可能会有空白
background-size: contain;
length
background-size: 100px 100px; ```
display属性
-
若有收获，就点个赞吧
0 人点赞
