【CSS基础】CSS常见问题

villainhr 发布于2019-08-30 14:06 / 3238人阅读

摘要：常见的布局两列布局两栏布局一栏定宽，一栏自适应，自适应的一栏作为内容主体。三列布局三列布局也是经常使用到的一种布局，它的特点是两边两列固定，中间自适应。左右两栏使用属性，中间栏使用属性。

垂直居中 单行文本垂直居中 父元素高度为auto

一个父元素如果不设置高度的话，默认就是紧包裹着子元素，如果父元素设置的pading-top和padding-bottom相同，这本身就是一个垂直居中效果，但是当子元素并不是独占一行，而是inline元素和inline-block元素组合成一行，比如下面这个例子：

inline元素和inline-block元素在同一行显示，由于图片这个inline-block元素本身有高度，就会把整个行撑开，但是文字和图片依然在一行，细看可以发现，图片本身并没有和文字最下边对齐，这是由于inline-block默认带有vertical-align属性，其值默认为baseline，也就是图片和文字的baseline对齐，注意vetical-align只对inline-block元素有效，这种情况下，只需要对inline-block元素设置vertical-align:middle即可实现垂直居中。效果如下：

父元素height为固定值

这种情况只需要在父元素上设置line-height属性等于父元素的height属性即可(line-height = height)，这种只适用于单行文本，且父元素高度固定，对于多行文本就无能为力了。

父元素height固定，子元素是块元素 子元素高度固定

这种情况下可以利用absolute定位来实现垂直居中。缺点就是脱离了普通文档流。

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    height:200px;
    margin-top:-100px;
}
// 或者下面的实现方法
.child {
    position:absolute;
    top:0;
    bottom:0;
    height:200px;
    margin:auto 0;
}

子元素height不固定

该情况下对子元素是块级元素或非块级元素均可以。

.parent {
    display:table-ceil;
    height:200px;
    vetical-align:middle;
}

该方法由于display:table-ceil属性的兼容性不够好，只能在IE8及更高版本使用。

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

该方法由于transform:translateY(-50%)属性的兼容性不够好，只能在IE9及更高版本使用。

flex

.parent {
    display:flex;
    align-items:center;
}

flex弹性布局更加的灵活简单，对页面中其他元素的影响更小，在IE11以及更高版本才能兼容，如果是在移动端开发，尽量使用该属性实现各种复杂的布局。

常见的布局 两列布局

两栏布局：一栏定宽，一栏自适应，自适应的一栏作为内容主体。

1：使用float + margin属性。

.left {
    width:200px;
    float:left;
}
.right {
    margin-left:200px;
}

也可以使用absolute定位来实现。

.container {
    position:relative;
}
.left {
    position:absoulte;
    left:0;
    width:200px;
}
.right {
    position:absolute;
    left:200px;
    right:0;
}

三列布局

三列布局也是经常使用到的一种布局，它的特点是两边两列固定，中间自适应。
1：左右两栏使用float属性，中间栏使用margin属性。

左栏
右栏
中间栏

.left,.right {
    float:left;
    width:200px;
}
.right {
    float:right;
}
.middle {
    margin:0 200px;
}

该方法必须要将中间栏放在最后，且如果父元素的宽度小于左右两栏宽度时，右侧栏会被挤下去。
2：使用position布局

.container {
    position:relative;
}
.left,.right {
    width:200px;
    left:0;
}
.right {
    left:auto;
    right:0
}
.middle {
    margin:0 200px;
}

该方法的缺点是如果父元素有内外边距的时候，会导致中间栏的位置出现偏差。

混合云专线服务 css基础基础css css基础教程基础选择器css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115777.html

关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

mj 2019-08-28 18:13 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

levius 2019-08-02 18:17 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

Yu_Huang 2019-08-01 14:48 评论0 收藏0
前端菜鸟笔记 Day-3 CSS基础

摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。文章大纲来源：【Day 3】HTML复习 + CSS基础初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。内容引用：CSS 简介样式解决了什么问题？ HTML...

mingzhong 2019-08-30 15:55 评论0 收藏0
前端菜鸟笔记 Day-3 CSS基础

摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。文章大纲来源：【Day 3】HTML复习 + CSS基础初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。内容引用：CSS 简介样式解决了什么问题？ HTML...

DangoSky 2019-08-02 14:12 评论0 收藏0
前端之CSS基础学习

摘要：上面五个问题就是我总结的基础概念，学习过程中一定要把它们弄明白别忘了有哦。请带着以下几个问题进行学习 CSS是什么 CSS的引用方式 CSS选择器 CSS优先级 CSS盒模型基础知识学习和实例演练教程 MDN中css教程CSS基础学习教程（css快速入门）CSS参考手册（便于了解更多css属性）CSS3教程（适用于移动端开发的css新特性）入门学习，一定要快，没有必要花大量时...

Hwg 2019-08-29 12:32 评论0 收藏0