关于CSS的那些事

smallStone 发布于2019-08-30 15:54 / 2338人阅读

摘要：关于背景图片的那些小技巧背景图片太大没办法居中显示怎么办想完整显示图片如何按比例缩放想要在页面上显示两个空格，应该怎么写代码在代码里写才行。

CSS简介

想要制作出好看又高大上的网页，除了编写好HTML文件外，CSS的编写也必不可少。CSS的英文全称是Cascading Style Sheets，即层叠样式表。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。下面我来介绍一些关于CSS的小技巧。

什么是文档流？

文档流的英文是 Normal Flow，其含义为文档内元素的流动方向，简单来说就是内联元素从左往右，块级元素从上往下流动。文档流中内联元素默认从左到右排列，宽度不够则自动换行；而文档流中块级元素从上到下排列，每个元素占一行。其中，float:left、position:absolute、position: fixed 可以使元素脱离文档流。

内联元素

给 inline 元素设置宽高是没有任何效果的，但是为其设置 margin、padding都是有效果的。

div高度由什么决定？

div高度由其内部文档流元素高度总和决定，一旦元素脱离了文档流就不再计入div高度中。

content-box 与 border-box 的区别是什么？

border-box 的 width 包括 padding 和 border，而content-box 正好与之相反，其width 不包括 padding 和 border。

关于背景图片的那些小技巧

1 背景图片太大没办法居中显示怎么办？

background-position:center center;

2 想完整显示图片如何按比例缩放？

background-size:cover;

3 想要在页面上显示两个空格，应该怎么写代码？
在代码里写才行。

如何做横向布局？

当我们想要让某些元素做横向布局时，我们都可以用以下套路来实现：

给所有想要在一行内的子元素加上float: left;属性

给所有父元素加上 clearfix 类
其中 clearfix 类为：

  .clearfix::after{
     content: "";
     display: block;
     clear: both;
  }

CSS画三角形

下面我们将利用纯css来画一个三角形:

div{
    border: 10px solid transparent;
    width: 0px;
    border-left-color: #e6686a;
    border-top-width: 0px;
}

服务器托管 idc机房托管云服务器那些事那些奇怪的错误云计算的股票有那些不备案的网站有那些

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

转载请注明本文地址：https://www.ucloud.cn/yun/116982.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
关于CSS Reset 那些事（三）之 Normalize-zh.css 出炉

摘要：本章节会完成所有源代码翻译整理，最终会整理出中文版本并开源至供大家交流使用。现已将源代码开源至项目地址源码解读上章节对与元素，元素，链接，语义化文本，内嵌元素，群组元素等源码内容已经做了解析，这章节继续完成表单，表格部分。前言上一章节我们对Normalize.css源码进行解析，但是由于其代码过长导致不宜浏览，所以表单Forms，表格Table部分内容放在此章节介绍。本章节会完成...

ISherry 2019-08-02 18:14 评论0 收藏0
关于CSS Reset 那些事（三）之 Normalize-zh.css 出炉

摘要：本章节会完成所有源代码翻译整理，最终会整理出中文版本并开源至供大家交流使用。现已将源代码开源至项目地址源码解读上章节对与元素，元素，链接，语义化文本，内嵌元素，群组元素等源码内容已经做了解析，这章节继续完成表单，表格部分。前言上一章节我们对Normalize.css源码进行解析，但是由于其代码过长导致不宜浏览，所以表单Forms，表格Table部分内容放在此章节介绍。本章节会完成...

harryhappy 2019-08-28 18:11 评论0 收藏0