2,CSS-编程知识

2,CSS

news/2025/3/12 22:30:36/文章来源:https://www.cnblogs.com/linxiaoki/p/18768784

CSS盒子模型

IE盒模型 border-box

width和height是盒子最终的尺寸(添加box-sizing:border-box )
标准盒模型 content-box
width和height只是内容的尺寸(默认)

width  height  background-color  border  padding margin  (box-sizing)

CSS布局实践

display

定义了元素生成的显示框类型，常见属性值有：block、inline、inline-block、inherit、none、flex.

div标签默认的display属性是block，通常称为块级元素
- 常见的块级元素<div>、<h1>~<h6>、<p>、<ul>、dl、<table>、<address>、<form>等)
span标签默认的display属性是inline,称为行内元素
- 设置宽高不会起作用( margin 和 padding 的值都只对左右起作用)
- 不可以包含块级元素，只能包含行内元素和文本
- 常见的行内元素有：<a>、<b>、<label>、<span>、<img>、<em>、<strong>、<i>、<input>等
- <img>标签设置宽高可以影像图片大小，这是因为 img 是可替代元素 ??
inline-block 即具有块级元素可以设置宽高的特性，又具有行内元素不换行的特性，但元素间会有间隙，消除看这个.
inherit表示从父元素继承display属性
none表示这个元素不显示，也不占用空间位置
flex布局(弹性布局)
- Flex布局中的元素具有可伸缩性
- 通过设置父元素的 display 属性为display: flex | inline-flex;,其子元素便有了伸缩性.

position

用来定义元素的定位机制。常用的属性值有：

relative：相对定位，相对于元素的正常位置进行定位；
- 不添加额外属性( left , right , top , bottom 等),它表现的如同 static 一样
- 添加额外属性会使元素偏离正常位置，并且可能覆盖相邻元素
absolute：绝对定位，相对于除 static定位以外的父级/祖先元素进行定位；
- 如果祖先元素都没有设置定位属性，absolute 会找到最上层即浏览器窗口进行定位
fixed：固定定位，相对于浏览器窗口进行定位，网站中的固定 header 和 footer 就是用固定定位来实现的；
- 页面广告应该就是这样的吧
static：默认值，没有定位属性，元素正常出现在文档流中；
inherit：继承父元素的 position 属性值。

float

float 属性定义元素在哪个方向浮动。

常用属性值有left、right,即向左浮动和向右浮动。
"高度塌陷":子元素溢出到父元素外
- 不设置float属性，不给父元素设置宽高时，父元素的宽高会被子元素的内容撑开(如果给父元素设置了宽高，并且宽高小于子元素时也会有高度塌陷)
- 设置float属性时，不给父元素设置宽高，父元素不会被子元素撑开，称之为"高度塌陷"

　　　　　　　　(浮动的子元素不能撑开父元素)
[!清除浮动的方法](https://www.yuque.com/fe9/basic/ecdg1z)

经典布局示例

　　大多网站会将页面分为几部分：header (头部)、footer (尾部)
、nav (侧边栏) 、section (核心内容部分)

两栏布局
- 基础代码
```
<head><style type="text/css">.left{width:100px;height: 150px;background-color:#FFB5BF;}.right{height:150px;background-color: #94E8FF;}</style></head><body><div class="container"><div class="left">left</div><div class="right">right</div></div></body>
```
- 设置 display 为 inline-block- container.font-size->0 消除间距- right.width-> calc计算宽度 - 使用float -1 - left.float->left- right.margin-left->100px ,为左侧留空间- container.overflow->hidden - 使用浮动 -2(.right形成BFC？)- left.float->left- right.overflow->auto 形成BFC- container.overflow->hidden - 使用absolute- container.position->relativea- left.position->absolute- right.margin-left->100px 为左侧留空间

三栏布局

圣杯布局

<head><style type="text/css">body{min-width:630px;  /* 保证窗口缩小时仍能展示 */}.center{width:100%;height:150px;background-color: #94E8FF;}.left{width:100px;height: 150px;background-color:#FFB5BF;}.right{height:150px;width:200px;background-color: #8990D5;}</style>
</head>
<body><div class="container"><div class="center">center</div><div class="left">left</div><div class="right">right</div></div>
</body>

###### 思想：使用浮动布局，用 padding 为左右元素留空间，灵活使用 margin 的负值和相对定位上元素移动到相应的位置。- 三栏添加左浮动- 移动 margin-left，但会覆盖 center- container 预留位置 padding-left/right- left 、right 相对移动 - 双飞翼布局- 多加了 div：container-center ，没有padding

Flex布局

上图便是一个 Flex布局的大致架构了，图中的囊括概念有几点： - Flex 布局是一整个模块，其中父元素称为 flex container，意为容器；子元素称为 flex item，意为项目； - Flex 布局中有两条看不见的轴线：主轴（main axis）和交叉轴（cross axis）。默认的主轴是平行的，交叉轴是垂直于主轴的； - 主轴的开始位置叫 main start，结束位置叫 main end；交叉轴的开始位置叫 cross start，结束位置叫 cross end； - 子元素在主轴方向上的大小称为 main size，在交叉轴方向上的大小称为 cross size。

容器属性 ( content )

定义为Flex布局的容器 display: flex | inline-flex
容器属性：

flex-direction 方向
- row (主轴，水平，起点在左侧)
- row-reverse
- column
- column-reverse
flex-wrap 换行
- nowrap (不换行)
- wrap
- wrap-reverse
flex-flow (flex-direction 和 flex-wrap)
- row no-wrap
justify-content 项目在主轴上的对齐方式
- flex-start
- flex-end
- center
- space-between
- space-around
align-items 项目在交叉轴上的对齐方式
- flex-start
- flex-end
- center
- baseline
- stretch
align-content 多行时垂直方向的对齐方式
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch

项目属性( item )

order
- 排列顺序，defailt: 0
flex-grow
- 存在空间剩余时，放大比例，default: 0
- 所有项目为1时，平分剩余空间
flex-shrink
- 空间不足时，缩小比例，set 1:等比缩小，set 0 :不缩小
flex-basis
- default: auto
  -分配空间
flex
- flex-grow、flex-shrink、flex-basis 默认值时 0 1 auto
- 还有两个快捷值 auto(1 1 auto )和 none （0 0 auto )
align-self
- 定义单个项目与其他项目不一样的对齐方式，可以覆盖 align-items
- default : auto (继承父元素的align-items属性值，无父元素时等同 stretch)