当前位置：首页 > wzjs >正文

商丘做网站建设国外网站建设软件有哪些

wzjs 2025/9/1 12:58:32

商丘做网站建设,国外网站建设软件有哪些,wordpress英文企业模板下载,wordpress 图标 pngcss css是什么层叠样式表对于页面上的文字、图案、多媒体、整体的布局、表现、样式问题、都是css来解决的。 BFC 是什么？ 盒模型。把文档看成一个个盒子 BFC的概念所谓BFC,就是block formatting context ，块级格式化上下文。它会创建一个特殊…

css

css是什么

层叠样式表

对于页面上的文字、图案、多媒体、整体的布局、表现、样式问题、都是css来解决的。

BFC 是什么？

盒模型。
把文档看成一个个盒子

BFC的概念

所谓BFC,就是block formatting context ，块级格式化上下文。
它会创建一个特殊的区域，在这个区域中，只有block box参与布局。

BFC的成因

根元素或者其他包含它的元素
浮动元素
绝对定位元素
内联块
表格单元格
表格标题
*具有overflow，且不是visible的元素
display：inline-bloc\table-cell\table-caption/flex/inline-flex/grid/inline-grid

BFC的特点/原则

内部的box将会独占宽度，且在垂直方向，轮流排列。
box垂直方向的间距由margin决定，但是同一个BFC的两个相邻box的margin ,会出现边距折叠的现象。
BFC区域不会与浮动元素重叠而是依次排列。
BFC 的区域是一个独立的渲染容器，容器内的元素和BFC区域外的元素不会形成干扰。
浮动元素的高度也参与到BFC 高度计算中。

<!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><!-- <link rel="stylesheet" type="text/css" href="./index.css" > -->
</head>
<body><h2>BFC 例题</h2><h3>BFC  例1：左边固定右边自适应</h3><div class="left1"></div><div class="right1"></div><h3>BFC  例2：高度塌陷</h3><div class="root"><div class="child child1" ></div><div class="child child2" ></div></div><h3>BFC  例3：边距折叠</h3><div><p>paragraph 1</p><div class="warpped"><p>paragraph 2</p></div></div></body>
<style>.warpped {overflow: hidden;}p {color:aqua;background: #000;width: 200px;margin: 20px;}.root {border: 2px solid #000;width: 600px;overflow: hidden;}.child {border: 2px solid #f66;width: 100px;height: 100px;float: left;}.title {color: red;}.left1 {width: 200px;height: 160px;float: left;background: #f66;}.right1 {height: 200px;background-color: beige;overflow: hidden;}</style>
</html>

css 的重点

背景、阴影、滤镜

背景background

X-color
X-image
X-repeat
X-attachment scroll/fixed
X-position
X-size
X-origin
X-clip
X-blend-mode

background 的连接规则
background：color image repeat attachment position/size

阴影 box-shadow text-shadow

offsetX 水平偏移
offsetY 垂直偏移
blur 模糊半径
color 颜色

滤镜 filter

blur 模糊
brightness 两端
contrast 对比度
drop-shadow 阴影
hue-rotate 色相旋转
invert 反相
opacity 透明度
saturate 饱和度
sepia 褐色

定位

fixed 相对于浏览器窗口定位
absolute 相对于第一个父级不为static的定位
relative 不改变文档流，直接基于原来的位置定位
sticky fixed 和relative 切换
static normal

<!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>
</head>
<body><div class="grand"><div class="father"><div class="child1"></div><div class="child2"></div></div></div>
</body>
<style>.grand {height: 2000px;width: 1000px;background-color:antiquewhite;}.father {height: 600px;width: 600px;background-color: aquamarine;margin: 100px;left: 100px;}.child1 {height: 200px;width: 200px;background-color: red;top: 0px;left: 0px;}.child2 {height: 200px;width: 200px;background-color: #f66;position: sticky;top: 0px;left: 0px;}
</style>
</html>