css基础系列

SexySix 发布于2019-04-22 16:12 / 1125人阅读

摘要：盒子模型边框，外边距，内部距，内容，宽度。盒子模型和标准盒子模型行内块元素，元素呈现为具有相依特性元素不会被显示。文字基线属性设置元素中文本行高语法长度值百分比浏览器有默认的行高，不同浏览器默认行高不一样。

盒子模型：

border边框，margin外边距，padding内部距，content内容，width宽度。

高度：
height: 长度值|百分比|auto
最大高度:
max-height: 长度值|百分比|auto
最小高度:
min-height:长度值|百分比|auto

边框的属性：
边框宽度：border-width
边框颜色：border-color
边框样式：border-style

边框属性：

border- left | right | top | bottom -width
border ... -color
border ... -style

content+padding = ie

doctype html 声明

display属性
inline显示内联元素，元素前后没有换行符
block显示块级元素，元素前后有换行符

内联元素使用width和height属性有效。
inline-block行内块元素。

ie 盒子模型和标准 w3c 盒子模型

inline-block 行内块元素，元素呈现为inline,具有block相依特性,none元素不会被显示。

css文本样式：

text-align设置元素内文本的水平对齐方式。

text-align:
left|right|center|justify

div{text-align:center;} div img src= / /div

文字基线：

line-height属性
设置元素中文本行高
语法：
line-height:长度值|百分比

浏览器有默认的行高，不同浏览器默认行高不一样。

word-spacing 设置元素内单词之间的间距
letter-spacing 设置元素内字母之间的间距

文字样式：字体，font-family和font-size。

文字粗细：
font-weight:normal|bold|bolder|lighter|100到900

文字样式：
font-style:normal|italic|oblique

水平对齐：
text-align: left|right|center|justify

背景，列表

背景图片重复问题：
设置元素的背景图片重复方式：

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片显示方式：
设置元素的背景图片的显示方式：

background-attachment: scroll | fixed

scroll: 默认值，背景图片随滚动条滚动
fixed:当页面的其余部分滚动时，背景图片不会移动

背景图片定位：
设置元素的背景图片的位置：

列表：

list-style-position: inside | outside

css中的float

float:left;
float:right;
float:none;
float:inherit;

浮动变块状元素，浮动能环绕效果。

定位css

标准流，定位，浮动

浮动的问题如何解决

手动给父元素添加高度
通过clear清除内部和外部浮动
给父元素添加overfloat属性并结合zoom:1使用
给父元素添加浮动

css中的position

css背景与列表

css背景样式
background-color:设置元素的背景颜色
background-image:把图像设置为背景
background-position:设置背景图像的起始位置
background-attachment:背景图像是否固定或者随着页面的其余部分滚动
background-repeat:设置背景图像是否重复以及如何重复
background：背景属性设置

css列表样式

list-style-type:设置列表项标志的类型
list-style-image:将图像设置为列表项标志
list-style-position:设置列表中列表项标志的位置
list-style:简写

背景样式
设置背景颜色和背景图片

背景颜色，设置元素的背景颜色

background-color:颜色 | transparent
背景图片
设置元素的背景图片
background-image: url | none

背景图片重复
background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片显示的方式
设置元素的背景图片的显示方式
background-attachment: scroll | fixed

scroll:随着滚动条滚动，fixed:背景图片不会移动

background: background-color background-image background-repeat background-attachment background-postion

列表项，list-style-type:关键字 | none
list-style-image: url | none
list-style-position : inside | outside

list-style: list-style-type list-style-position list-style-image

div, ul, li, dl, dt, dd, img

html,css,javascript关系

html是网页内容的载体，css样式是表现，javascript是行为。

css优先级
行内样式内部外部

css选择器
标签选择器，全局选择器，类选择器，群组选择器，id选择器，后代选择器

群组选择器

链接伪类
:link 未访问
:visited 已经访问
:hover 鼠标悬停
:active 激活

css继承和层叠

从父元素那继承部分css属性
css层叠可以定义多个样式

选择器的权重

标签选择器1
类和伪类10
id选择器100

通配符0
行内样式1000

这种声明高

id不要滥用，适当使用class

css导入式@import 外部css样式

盒子模型：
盒子模型概念，内边距设置，高和宽的设置，边框的设置，外边距设置，盒子的计算，元素显示的方式。

border-width: thin | medium | thick
border-color: 颜色 | transparent

display: inline | block | inline-block | none

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

感谢！承蒙关照！您真诚的赞赏是我前进的最大动力！

这是一个有质量，有态度的公众号

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容

云服务器 GPU云服务器 css基础基础css css基础教程基础选择器css

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

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

webpack多页应用架构系列（五）：听说webpack连less/css也能打包？

摘要：用到什么了在多页应用架构系列二配置常用部分有哪些里我就说过，的核心只能打包文件，而以外的资源都是靠进行转换或做出相应的处理的。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006897458如果您对本系列文章感兴趣，欢迎关注订阅这里：https://segmentfault...

Me_Kun 2019-08-22 10:39 评论0 收藏0
#WEB安全基础 : HTML/CSS | 文章索引

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

EscapedDog 2019-04-23 11:53 评论0 收藏0
你需要的前端进阶书籍清单，分享下载

摘要：写在前面目前专注深入学习，特花了点时间整理了一些前端学习相关的书籍。大致分为以下大系列系列系列基础系列应用系列进阶系列类库系列框架系列。这些书籍在这里免费提供下载，有兴趣的一起学习。写在前面目前专注深入JavaScript学习，特花了点时间整理了一些前端学习相关的书籍。大致分为以下7大系列：CSS系列、DOM系列、JavaScript基础系列、JavaScript应用系列、Ja...

yuanzhanghu 2019-08-26 10:28 评论0 收藏0
【快速入门系列】CSS盒模型基础

摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。一、什么是...

Code4App 2019-08-29 15:20 评论0 收藏0
【快速入门系列】CSS盒模型基础

摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。一、什么是...

LinkedME2016 2019-08-02 10:22 评论0 收藏0