CSS知识点总结
1.选择器
参考链接:十分钟搞定CSS选择器-Samaritans CSS选择器笔记-阮一峰 CSS选择器-w3school MDN
参考书籍:《CSS高效开发指南》
2.布局
2.1 盒模型
颜色:内边距总是跟元素的背景色一样,所以当你设置背景色时,你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。
作用:内边距和边框主要的作用是装饰;外边距主要用于布局,目的是控制元素之间的距离。
box-sizing: content-box|border-box|inherit;
盒模型中,默认box-sizing:content-box; 元素的边框和内边距会撑开元素。
box-sizing: border-box:用来改变默认的CSS盒模型对元素宽高的计算方式,使得元素的内边距和边框不再会增加它的宽度。
2.3 浮动
清理浮动两种方式:
1. 利用 clear 属性,清除浮动;
2. 使父容器形成 BFC(Block Formatting Context)
清除浮动可以理解为打破横向排列。其语法:clear : none | left | right | both
取值:
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
2.4 定位
默认值(positin:static):在CSS中为元素定义 top、left、right、bottom、z-index 都不会生效
- 块级元素的宽度在未定义时不再为100%,而是根据内容自动调整
- 在不定义 z-index 的情况下,absolute 元素会覆盖在其他元素之上
- 它会脱离正常的文档流,不再占据空间,类似于浮动后的效果
CSS知识点总结的更多相关文章
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11
系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
- css知识点
css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...
- CSS知识点集锦
CSS知识点集锦 CreateTime--2016年9月29日09:43:10Author:Marydon UpdateTime--2017年3月21日08:03:13 2.CSS样式优先级问题 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作、构建表单)
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作、代码编写规则)
系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
随机推荐
- 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI
Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...
- 使用System.Timers.Timer类实现程序定时执行
使用System.Timers.Timer类实现程序定时执行 在C#里关于定时器类有3个:System.Windows.Forms.Timer类.System.Threading.Timer类和Sys ...
- S1:new操作符
function Shape(type){ this.type = type || "rect"; this.calc = function(){ return "cal ...
- phpstrom+xdebug+Xdebug helper 调试php
第一步,php.ini打开xdebug扩展 xdebug.remote_enable=on ; 此地址为IDE所在IP xdebug.remote_host=127.0.0.1 xdebug.remo ...
- C++-const_cast只能用于指针和引用,对象的const到非const可以用static_cast
Static_cast可以对对象也可以对指针也可以对引用,但是const_cast只可以对指针和引用使用,后者不可以对对象用,如果你要把一个const值转化为非const值只能用隐式执行或通过使用st ...
- Android计算时间差
想要写个根据消耗时长来确定开始结束时间的小工具,发现Android处理时间上有点累,可能是我没找到合适的方法吧,先把我的解决办法贴出来,有好的解决方法还希望提醒一下: 1.根据时间字符串获取毫秒数 p ...
- 【C语言学习】-03 循环结构
本文目录 循环结构的特点 while循环 do...while循环 for循环 回到顶部 一.循环结构的特点 程序的三种结构: 顺序结构:顺序执行语句 分支结构:通过进行一个判断在两个可选的语句序列之 ...
- 如何在redhat下安装办公软件(openoffice)
在redhat的client版本中自带有办公软件libreoffice,而在server版的redhat中却没有自带的办公软件,那么,如何在redhat的server版下安装办公软件呢? 方法一:配置 ...
- Program B 暴力求解
Given a sequence of integers S = {S1,S2,...,Sn}, you should determine what is the value of the maxim ...
- 网易云课堂 OCP
数据库DBA任务: 管理数据库可用性 设计并创建数据库 管理物理结构 管理基于设计的存储 管理安全性 网络管理 备份与恢复 数据库调整与优化 关系型数据库(RDBMS) 多个表数据之间存在着关系 关系 ...