CSS布局

augenstern416

已于 2024-12-13 19:18:01 修改

阅读量647

点赞数 21

分类专栏： CSS 文章标签： css 前端

于 2024-12-12 19:54:50 首次发布

本文链接：https://blog.youkuaiyun.com/augenstern416/article/details/144433714

版权

CSS 专栏收录该内容

5 篇文章

订阅专栏

1.CSS哪些属性脱离文档流

什么是文档流？

将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。

什么是脱离文档流？

如果脱离文档流，那么文档原本占据文档流的位置会被它后面的元素填补。

CSS哪些属性脱离文档流

脱离文档流有两种方式，浮动和定位

第一种:定位

position:absolute
position:fixed

第二种:浮动

float也脱离文档流；

float:left
float:right

2.居中显示元素

行级元素:

text-align: center（水平居中）

块级元素：

1.margin: auto; （水平居中）

2.flex布局:

.flex {
  display:flex;
  /* 主轴上 居中 */
  justily-content: center;
  /* 交叉轴上 居中 */
  align-items: center;
}

3.flex布局 + margin （水平垂直居中）

<style>
/* 容器div 样式 */
.content-div { display:flex; }

/* 待居中div 样式，下面只取一个*/
/* 水平+垂直 */
.test-div { margin: auto; }

/* 水平 */
.test-div-sp { margin: 0 auto; }

/* 垂直 */
.test-div-cz { margin: auto 0; }
</style>

4.绝对定位（position） + margin （水平垂直居中）

<style>
/* 容器div 样式 */
.content-div {
  position:relative;
}

/* 待居中div 样式*/
/* 水平 + 垂直 */
.test-div {
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

/* 水平 */
.test-div-sp {
	position:absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
}

/* 垂直 */
.test-div-cz {
	position:absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}
</style>

5.绝对定位（position） + transform:translate(-x, -y)（水平垂直居中）

<style>
/* 容器div 样式 */
.content-div {
  position:relative;
}

/* 待居中div 样式*/
/* 水平 + 垂直 */
.test-div {
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%)
}

/* 水平 */
.test-div-sp {
  position:relative;
  left: 50%;
  transform:translate(-50%)
}

/* 垂直 */
.test-div-cz {
  position:absolute;
  top: 50%;
  transform:translate(0, -50%)
}
</style>

3.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式设计简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本

优点

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

实现：

第一步. Meta 标签

为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在 <head>里面

<meta name="viewport" content="width=device-width, initial-scale=1.0">

IE8及以下的浏览器不支持media query。你可以使用 media-queries.js 或 respond.js 。这样IE就能支持media query了。

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

第二步. HTML 结构

这个例子里面，有header、content、sidebar和footer等基本的网页布局。

header 有固定的高180px，content 容器的宽是600px，sidebar的宽是300px。

第三步. Media Queries

CSS3 media query 响应式网页设计的关键。它像一个if语句，告诉浏览器如何根据特定的屏幕宽口来加载网页。

如果屏幕窗口小于980px，规则就生效。设置了容器的宽度为百分比的形式而不是像素单位，这样会更加灵活。

如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

4.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？

CSS选择符有哪些

id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul < li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = “external”]）
伪类选择器（a: hover, li: nth - child）

可以继承

可继承： font-size、 font-family 、color、 UL 、LI DL DD DT;

不可继承

不可继承：border padding margin width height ;

优先级算法

1）、优先级就近原则，样式定义最近者为准;

2）、载入样式以最后载入的定位为准;

优先级为: 从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符；

important 比内联优先级高，但内敛比id要高；

CSS3新增伪类举例

p:first-of-type 选择属于其父元素的首个  元素的每个  元素。
p:last-of-type 选择属于其父元素的最后  元素的每个  元素。
p:only-of-type 选择属于其父元素唯一的  元素的每个  元素。
p:only-child 选择属于其父元素的唯一子元素的每个  元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个  元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

5.如何适配移动端？

1 viewport进行缩放

<meta name="viewport" content="width=device-width,initial-scale=1">

2 使用rem

rem是什么(CSS3新增)，初始值：1rem=16px？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位

rem(1rem = 16px) / viewport（固定宽度） / media query（屏幕大小自适应）

3 设计上（响应式方法）

隐藏（移动端隐藏元素）折行（横排变纵排）自适应（留下自适应的空间）（media query）

4 固定宽度做法

定宽布局（版心）