CSS基础

Atom 发布于2019-08-29 15:32 / 2623人阅读

摘要：块级元素默认设置为，行内元素默认设置为。颜色值是阴影的基本颜色。如持久导航菜单元素的位置通过以及属性进行规定。粘性定位该定位基于用户滚动的位置。

溢流(Overflow )

• auto：如果内容太多，那么超出盒子大小的内容会被隐藏，滚动条显示出来，从而可以让用户滚动看到所有内容。
• hidden：如果内容太多，那么超出盒子大小的内容被隐藏了。
• visible：如果内容太多，超出盒子大小的内容显示在盒子之外（这通常是默认的行为）。

背景剪裁 (Background clip)

border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。

设置宽和高的约束

如果想通过设置将一个布局的外层容器的宽度设置为百分比，从而让布局的宽度变得灵活，不过又不想让它变得太宽或者太窄, 给布局一个最大和最小宽度约束即可

width: 70%;
max-width: 1280px;
min-width: 480px;

可以将应用这段代码的容器在它的父容器内居中：

margin: 0 auto;

当父容器在最小和最大宽度限制内时，它将填满整个视口宽度；当父容器超过1280px宽度时，布局将保持在1280px宽，并开始在可用空间内居中。当宽度低于480px时，视口将小于容器，您必须滚动才能看得到完全的内容。

控制图像大小

图像会引起一个问题——起初它的显示正常，但当容器变得比图像更窄时，图像开始溢流容器（因为它是一个固定的宽度）。要应对这类图像的问题，我们可以在其上设置以下声明：

display: block;
margin: 0 auto;
max-width: 100%;

完全改变盒模型 box-sizing: border-box;

宽度和高度等于通过CSS设置在 content 的宽度和高度。 padding 和 border 并没有添加到总宽度和高度上; 反而，他们占用一些内容的空间，使内容更小.

常见的display的类型

• 块盒(block box)是被定义为堆放在其它盒子之上的盒子（即盒子之前以及之后的内容出现在不同的行上），并且可以给它设置高度和宽度。上面所述的整个盒模型都适用于块盒。

• 行内盒（inline box）与块盒相反：它跟随文档的文本流堆放（即，它会与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行）。宽度和高度设置对行内盒无效；在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置，但是不会影响周围块盒的位置。

• 行内块盒（inline-block box）介于前两者之间：它会像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；不过，它可以像块盒一样，使用宽度和高度设置大小，并且维护其块完整性 — 它不会跨段落行换行（对于一行文本容纳不下的行内盒，会落到第二行上，因为第一行上没有足够的空间容纳它，并且不会跨两行换行）。

块级元素默认设置为 display: block; ，行内元素默认设置为 display: inline; 。

display: table — 允许你像处理table布局那样处理非table元素，而不是滥用HTML的

标签来达到同样的目的。
display: flex — 允许你处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。
display: grid — 给出一种简单实现CSS网格系统的方式，而在传统上它依赖于一些棘手难以处理的CSS网格框架

背景颜色 background-color

大多数元素的默认背景颜色不是white (白色，这可能如你所料) 而是transparent（透明）

背景位置：background-position

该空间指定了图像的水平(x)和垂直(y)坐标。图像的左上角是原点(0,0)。
该属性可以接受许多不同的值类型:
像px这样的绝对值——比如 background-position: 200px 25px.
像rems 这样的相对值——比如 background-position: 20rem 2.5rem.
百分比 ——比如 background-position: 90% 25%.
关键字——比如 background-position: right center. 这两个值是直观的，可以分别取值比如 left，center， right和 top，center， bottom。
如果只指定一个值，那么该值将被假定为水平值，而垂直值将默认为center

背景图像：渐变

线性渐变是通过linear-gradient()函数传入的，它是一个background-image属性的值。函数至少需要用逗号分隔的三个参数——背景中渐变的方向[可以使用关键字来指定方向（to bottom，to right， to bottom right等），或角度值 (0deg相当于 to top，90deg 相当于 to right，直到 360deg，它再次相当于 to top ）。]，开始的颜色和结尾的颜色。

div {
background-image: linear-gradient(to bottom, orange, yellow);
}

背景附着 background-attachment

scroll: 这将把背景修改为页面视图，因此它将在页面滚动时滚动。注意，我们说的是视图，而不是元素——如果滚动实际的背景设置的元素，而不是页面，背景不会滚动。

fixed: 这可以在页面的位置上固定背景，所以当页面滚动时，它不会滚动，不管你是滚动页面还是背景设置的元素，它都会保持在相同的位置。

local:这个值后来被添加了(它只在Internet Explorer 9+中得到支持，而其他的则在IE4+中得到支持)，因为scroll值相当混乱，并且在许多情况下并没有真正做您想要的事情。 local 值将背景设置为它所设置的元素的背景，因此当滚动元素时，背景会随之滚动。

多个背景

div {
background: url(image.png) no-repeat 99% center,
            url(background-tile.png),
            linear-gradient(to bottom, yellow, #ffffdd00 50%, orange);
background-color: yellow;
}

可以将多个值放入到普通写法的 background-*属性中，比如：

background-image: url(image.png), url(background-tile.png);
background-repeat: no-repeat, repeat;

边界

当没有明确设置值时，边界会默认使用文本的颜色，宽度为3px。

边界半径 border-radius

如果需要兼容旧的浏览器——border-radius 只支持Internet Explorer 9以上。

可以创建椭圆形角（x半径与y半径不同）。两个不同的半径用正斜杠（/）分隔

border-radius: 10px / 20px;
border-radius: 10px 30px / 20px 40px;

盒子阴影

text-shadow属性，它允许将一个或多个阴影应用到元素的文本上。对于盒子来说，存在一个等价的属性——box-shadow允许将一个或多个阴影应用到一个实际的元素盒子中。
只有在IE9+（IE9及更新版本）中可用
box-shadow属性值中有4个项：
1.第一个长度值是水平偏移量（horizontal offset ）——即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。
2.第二个长度值是垂直偏移量（vertical offset）——即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。
3.第三个长度的值是模糊半径（blur radius）——在阴影中应用的模糊度。
4.颜色值是阴影的基本颜色（base color）。

与text-shadow不同，box-shadow有一个inset关键字可用——把它放在一个影子声明的开始，使它变成一个内部阴影，而不是一个外部阴影。

background-image: linear-gradient(to bottom right, #777, #ffffd);

Filters（过滤器）

过滤器可以应用在任何元素上，块元素（block）或者行内元素（inline）——你只需要使用filter属性，并且给他一个特定的过滤函数的值。它们作用于盒（box）内内容（content）的确切形状，而不仅仅将盒子本身作为一个大的块。

多列浮动布局两列布局

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;}

div:nth-of-type(1) {
  width: 48%;}
div:nth-of-type(2) {
  width: 48%;}

div:nth-of-type(1) {
  width: 48%;
  float: left;}
div:nth-of-type(2) {
  width: 48%;
  float: right;}

清除浮动


  ©2016 your imagination. This isn"t really copyright, this is a mockery of the very concept. Use as you wish.

footer {
  clear: both;}

clear 可以取三个值：
1.left：停止任何活动的左浮动
2.right：停止任何活动的右浮动
3.both：停止任何活动的左右浮动

定位静态定位 static

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置（忽略 top, bottom, left, right 或者 z-index 声明）元素出现在正常的流中

相对定位 relative

相对定位是我们将要看的第一个位置类型。它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。需要使用top，bottom，left和right属性来修改元素的位置。

元素相对自身的原位置偏移某个距离，但是原本的空间依旧保留，表现为空白
把一个元素设置为position: relative; 可以使该元素的子元素相对该元素绝对定位。

固定定位 fixed

绝对定位固定元素是相对于元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。（如持久导航菜单）元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

粘性定位 sticky

该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix

Inherit

规定应该从父元素继承 position 属性的值。

Initial

设置该属性为默认值

z-index

z-index只能在position属性值为relative或absolute或fixed的元素上有效。

专线服务私有云 css基础基础css css基础教程基础选择器css

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

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

#WEB安全基础 : HTML/CSS | 文章索引

摘要：黑体本系列讲解安全所需要的和黑体安全基础我的第一个网页黑体安全基础初识黑体安全基础初识标签黑体安全基础文件夹管理网站黑体安全基础模块化黑体安全基础嵌套列表黑体安全基础标签拓展和属性的使用黑体安全基础嵌套本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基...

EscapedDog 2019-04-23 11:53 评论0 收藏0
关于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基础学习

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

Hwg 2019-08-29 12:32 评论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