前端基础篇之CSS世界
小刚老师
基本概念
盒模型四大金刚
好基友`line-height`和`vertical-align`
流的破坏
层叠规则
弹性布局
网格布局
文本控制
元素的显示与隐藏
基本概念
这些基本概念有些可能不易理解但却都很重要,如果看完还是很不理解的话需要自己谷歌或百度,网上关于这些概念的文章不少。
流
“流”又叫文档流,是css的一种基本定位和布局机制。流是html的一种抽象概念,暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是html默认的布局机制,如你写的html不用css,默认自上而下(块级元素如div
)从左到右(内联元素如span
)堆砌的布局方式。
块级元素和内联元素
这个大家肯定都知道。
块级元素是指单独撑满一行的元素,如div、ul、li、table、p、h1
等元素。这些元素的display值默认是block、table、list-item
等。
内联元素又叫行内元素,指只占据它对应标签的边框所包含的空间的元素,这些元素如果父元素宽度足够则并排在一行显示的,如span、a、em、i、img、td
等。这些元素的display值默认是inline、inline-block、inline-table、table-cell
等。
实际开发中,我们经常把display
计算值为inline
inline-block
inline-table
table-cell
的元素叫做内联元素,而把display
计算值为block
的元素叫做块级元素。
width: auto 和 height: auto
width
、height
的默认值都是auto
。
对于块级元素,width: auto
的自动撑满一行。
对于内联元素,width: auto
则呈现出包裹性,即由子元素的宽度决定。
无论内联元素还是块级元素,height: auto
都是呈现包裹性,即高度由子级元素撑开。但是父元素设置height: auto
会导致子元素height: 100%
百分比失效。
流体布局之下,块级元素的宽度width: auto
是默认撑满父级元素的。这里的撑满并不同于width: 100%
的固定宽度,而是像水一样能够根据margin
不同而自适应的宽度。
css的属性非常有意思,正常流下,如果块级元素的width
是个固定值,margin
是auto
,则margin
会撑满剩下的空间;如果margin
是固定值,width
是auto
,则width
会撑满剩下的空间。这就是流体布局的根本所在。
外在盒子和内在盒子
外在盒子是决定元素排列方式的盒子,即决定盒子具有块级特性还是内联特性的盒子。外在盒子负责结构布局。
内在盒子是决定元素内部一些属性是否生效的盒子。内在盒子负责内容显示。
如 display: inline-table;
外在盒子就是inline
,内在盒子就是table
。外在盒子决定了元素要像内联元素一样并排在一排显示,内在盒子则决定了元素可以设置宽高、垂直方向的margin等属性。如下图
右侧的table和左侧的文字在一行排列(外在盒子inline的表现特征),同时有拥有自定义宽度111px(内在盒子table可以设置宽高)。
css权重和超越`!important`
曾经有道面试题把我难住了:
// 假设下面样式都作用于同一个节点元素`span`,判断下面哪个样式会生效
body#god div.dad span.son {width: 200px;}
body#god span#test {width: 250px;}
可怜当时做了三年前端的我竟然还不知道css有权重
前端基础篇之CSS世界相关推荐
- 前端基础知识总结---CSS篇
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的? 2.CSS 选 ...
- WEB前端基础(HTML+CSS+JavaScript)(上)最好看最详细的笔记~
WEB前端基础 当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础 一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
- 【前端基础1-HTML和CSS】
前端基础 HTML决定网页的内容: CSS决定网页的美观程度: Javascript决定网页的特效. 1 HTML HTML的英文全称是Hyper Text Markup Language,即超文本标 ...
- 前端基础知识点总结CSS篇(问题实例)
CSS 优化.提高性能的方法有哪些? 多个 css 合并,尽量减少 HTTP 请求 css 雪碧图 抽象提取公共样式,减少代码量 选择器优化嵌套,尽量避免层级过深 (用'>'替换' ') 属性值 ...
- 前端基础HTML和css总结
HTML[Hyper Text Markup Language] 超文本标记语言,不是编程语言 软件架构: 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端 ...
- web前端基础仏学习css精灵css sprite技术解析
说到css sprite技术第一次接触还是在百度站长工具中网站检测时看到到,说这个技术可以减少网站图片请求次数,当时还不是很理解,之后了解了一番,明白了其中的原理,故在此给大家分享一下. CSS ...
- # 前端基础(HTML + CSS + JavaScript)
一.HTML 基础概念:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 可以使用 HTML 来建立自己的 WEB 站点,H ...
- 【前端基础】12.CSS 基础知识学习——基本语法结构
视频 目录 一,css基本规则规范 1.快捷方式 2.css注释 3.css命名规范 4.css书写规范 (1)空格规范 (2)选择器规范 (3)属性规范 5.css样式规则 二,字体样式 1.fon ...
- 文成小盆友python-num14 - web 前端基础 html ,css, JavaScript
本部分主要内容 html - 基础 css - 基础 一.html 标签 html 文档标签树如下: head 部分 Meta(metadata information) 提供有关页面的元信息,例:页 ...
最新文章
- 10分钟写一个markdown编辑器
- SWOOLE httpserver
- python IO编程-StringIO和BytesIO
- 新旧 iPhone 比速度,iOS 12 公开测试版发布!
- Maximo 7.5 集成方式 去掉主菜单
- Win10系统下面的TR1008解决方案
- Mathematic Paradigm
- ansible中变量注册 register的使用
- 腾讯云播放器隐藏音频播放的按钮
- ERP开源框架 + 二次开发平台 介绍
- 《东周列国志》第十八回 曹沫手剑劫齐侯 桓公举火爵宁戚
- 第九届蓝桥杯(国赛)——阅兵方阵
- 计算机应届毕业生怎么获得BATJ实习转正机会呢?
- nginx交叉编译流程
- 基于STM32F103单片机智能安全门禁人体感应报警方案设计
- 如何写好一篇SCI 并快速发表呢?
- 深入理解Linux进程描述符task_struct结构体
- docker 安装shipyard
- win10没有管理员执行权限
- LDO低功耗线性稳压IC
热门文章
- Mysql数据库报错:Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DY
- 靶场发展态势③美国防部赛博安全靶场(IAR/CSR)
- r语言 读服务器数据,R语言数据实战 | 安装R语言
- 人工智能、机器人、编程啥关系?(科普)
- 压缩比13为什么建议用92的油_纯干货|马自达发动机13:1压缩比,却可以烧92号油,为何不爆震?...
- 热插拔+远程控制,同为(TOWE)智能桌面PDU产品APZ-1026HR
- 三、在eclipse项目中添加Junit4
- mysql学习资料整理(不断更新)
- 机械革命旷世水冷游戏本 评测
- 名词解释bootloader