学习html/css基础的重点笔记
1、权重问题
内联样式表 > id选择符 > class选择符 > 类型选择符(所有html标签名称)
内联样式表 > 内部样式表、外部样式表
内部样式表、外部样式表的权重与书写顺序有关,后书写的权重高
注:虽然后书写的权重高,但是属性依旧被执行,只是相同属性会被覆盖,不同属性仍然显示
!important权重最高
开发者样式 > 读者样式 > 浏览器样式
!!!当出现权重的时候就会出现层叠性
2、用css画三角
a.将盒子的宽高设为0px;
b.添加边框border;
c.为边框设置颜色border-color: ,不需要显示的边设置为透明色transparent。
3、文本溢出时以省略号显示
a.文本设置不换行 white-space:nowrap;
b.溢出文本隐藏处理 overflow:hidden;
c.溢出文本以省略号显示 text-overflow:ellipsis;
d.前提条件:存放文本的元素必须设有宽度;只能用在单行文本。
4、关于图片(浏览器解析其属性为inline)可以添加宽高的解答
img为置换元素(通过标签或者属性来改变元素在页面中的显示状态),且置换元素在浏览器解析的过程中生成一个框。
非置换元素:浏览器中大多数元素为非置换元素,将内容直接展示给浏览器。
5、大图在小盒子里居中显示
a.为父元素添加定位 position:relative; 子元素添加定位 position:absolute;
b.子元素向右移动父元素的一半 left:50%;
c.子元素向左移动自身的一半 margin-left:-宽度一半;
6、图片整合(精灵图 css sprites)
a.整合规则:背景图必须为透明 (png/gif);
根据实际应用场景,小图标之间留出足够的间距;
尽量上下排列;
如果存在左右排列的小图标,li列表符号的背景图放在图片的最右侧。
b.本质:控制背景图的位置 background-position:
c.优点:减少服务器请求次数;减小图片质量
7、高度塌陷问题
a.出现情况:当子元素有浮动,父元素没有设置高度或者设置了最小高度时,会出现高度塌陷问题。
b.解决办法:
法一:谁塌陷就给谁添加属性 overflow:hidden;
原理:overflow:hidden;出发了BFC,BFC规定计算BFC高度时,浮动元素也参与计算。
优点:代码量少;缺点:会隐藏定位到父元素外部的内容。
法二:在浮动元素下方添加一个空标签,并为空标签添加属性 clear:both;
原理:both会忽略以上浮动元素预留出来的空间。
优点:代码量少;缺点:产生不必要的元素,造成代码冗余。
法三:万能清除法(闭合浮动)谁塌陷给谁添加 :after{content:" ";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
原理:visibility:hidden;对元素隐藏但仍留有空间。
优点:解决了以上两种方法的缺点;缺点:代码量相对来说有点多。
8、浏览器bug以及解决办法
a.当图片添加了a标签后,在IE浏览器上会出现边框
css hack:给img添加border:0; 或者 border:0 none;
b.在div中插入图片,图片会将div下方撑大大约3px
css hack 1:div标签与img标签写同一行;
css hack 2 :将img转为块状元素 display:block;
c.表单元素对齐方式不一致(不在同一水平线)
css hack :给表单元素添加浮动 float;
d.按钮大小不确定(边框问题)
css hack 1:只要按钮不出现在表单里都用a标签做;
css hack 2:为按钮标签添加一个父元素,并将样式添加在父元素上 eg:<span><input type="submit"></span>
css hack 3:如果按钮是一张图片,切图放在a标签里;
e.鼠标指针bug cursor:hand;(只有IE识别)
css hack:cursor:pointer;
f.关于透明度的兼容
css hack:opacity:属性值 ;(取值范围为0-1)
filter:alpha(opacity=属性值);(取值范围为0-100)IE
opacity:子元素会随父元素一起透明 rgba:背景透明 transparent:文字透明
g:margin的bug
bug1:给子元素添加margin-top。父元素会一起下移
bug2:纵向margin值不叠加
h:IE6的bug
bug1:双倍浮向边界(浮向边)margin值会双倍显示
css hack:给浮动元素添加属性 display:inline;
bug2:默认高度 当盒子的高度小于16px时会保持16px显示(IE默认最小高度为16px,认为内部留有最小文字高度)
css hack 1:font-szie:0;
css hack 2:overflow:hidden;
i:两个浮动元素的宽 50%+50%>100%
css hack:给右侧元素添加属性 clear:right;
j:导航条内li和a的bug
css hack:给li和a都添加float
9、BFC (block formatting context 独立渲染区 只有Block-level box参与 概念上的东西,用来解决一些排版问题)
布局规则:a.内部box会一个接一个垂直排列;
b.Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠;
c.计算BFC高度时,浮动元素也参与计算;
d.BFC区域不会与float box重叠;
e.每个元素的margin box的左边, 与包含块border box的左边相接触;
f.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
触发条件:a.根元素html;
b.float不为none;
c.position为absolute或fixed;
d.display为inline-block / table-cell / table-caption / flex / inline-flew;
e.overflow不为visible。
作用:a.清除内部浮动;
b.防止margin值上下重叠(加上一个会触发BFC的属性);
c.自适应两栏布局
10、继承性
不可继承的:display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
所有元素可继承:visibility和cursor
内联元素可继承:letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform
块状元素可继承:text-indent和text-align
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image
表格元素可继承:border-collapse
转载于:https://www.cnblogs.com/youy67/p/10167928.html
学习html/css基础的重点笔记相关推荐
- html css基础笔记,学习html/css基础的重点笔记
1.权重问题 内联样式表 > id选择符 > class选择符 > 类型选择符(所有html标签名称) 内联样式表 > 内部样式表.外部样式表 内部样式表.外部样式表的权重与书 ...
- Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
- 全栈学习之CSS基础学习
CSS基础学习 1. CSS导入方式 行内样式 内部样式 外部样式 2. 三种基本选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 关联 3. 层次选择器 3.1 后代选择器 ...
- 我的前端学习之CSS基础--选择器、字体、非布局样式、背景
CSS基础 选择器 半透明,可叠加,第一张的padding,第二张的font-size,第三张的background <style>body{padding :10px; font-siz ...
- 深度学习+语音,基础普及篇笔记(一)
深度学习应用领域,可以分为3大块:图像,语音,文字.最近有时间,研究下语音: (一)定义 语音是一个连续的音频流,它是由大部分的稳定态和部分动态改变的状态混合构成. 一个单词的发声(波形)实际上取决于 ...
- 前端学习之CSS基础
前言 html标签就不说了,这次学习CSS样式,就是美化html标签. 快速了解什么是css 普通标签: 加了css样式: <img src="https://static.runoo ...
- web前端开发-HTML+CSS基础入门 课程笔记
https://www.bilibili.com/video/BV1yx411d7Rc?p=3&share_source=copy_web 目录 概述 术语 版本和兼容性 开发环境的准备 第一 ...
- CSS学习 | 《CSS揭秘》读书笔记——第一章
第一章 引言 web标准 标准的制定过程:CSS规范通常是由CSS工作组的成员来编写的. 人员结构如:88%来自W3C会员公司的成员(比如浏览器厂商.主流网站.研究机构.常规技术公司等):7%特邀专家 ...
- 网络技术基础知识点整理,计算机基础知识重点笔记
0.本章思维导图: 1.网络层提供的两种服务 *网络层提供服务的特点:网络层向上只提供简单的.无连接的.尽最大努力交付的数据报服务,不保证可靠通信 虚电路服务:保证可靠通信,必须建立连接 思路:可靠通 ...
最新文章
- 什么业务场景适合使用Redis?
- 计算机系中学生的自我鉴定,中学生毕业自我鉴定
- hdu5399(找规律。。。)
- 【科普】一文把数据科学、人工智能与机器学习讲清楚
- springboot redis 断线重连_Redis的主从复制是如何做的?复制过程中也会产生各种问题?...
- qq计算机丢失msvcp100,打开会声会影提示msvcr100.dll丢失怎么办?
- mac下nvm_Mac OS 使用 nvm 管理 node 与 npm 版本
- [css] 你有使用过css的writing-mode属性吗?说说它有哪些应用场景?
- Jeewx-Boot 1.0.3 版本发布,基于SpringBoot的免费微信管家平台
- SQLite入门笔记
- spark-shell如何粘贴换行代码
- Matlab R2018b简体中文版完整安装图文教程(附安装包下载)
- 中国超级城市的新变局
- 我的开源.NET函数式编程类库——VBF 1.0 BETA1发布
- stata基本操作(一)
- bzoj4564: [Haoi2016]地图 仙人掌的圆方树 莫队 分块
- 【每日蓝桥】17、一三年省赛Java组真题“带分数”
- scons 手册_SCons笔记(详细版)
- 健康调查系统c语言代码大全,C语言问卷调查(示例代码)
- Oracle设计简单的图书管理
热门文章
- oracle通过UTL_SMTP包发送邮件
- DirectX11 With Windows SDK--36 延迟渲染基础
- 印象中的tcp?你可能一直都理解错了|开发者的必备技能
- v03.06 鸿蒙内核源码分析(时钟任务) | 调度的源动力从哪来 | 百篇博客分析HarmonyOS源码
- 破解美团外卖的 _token算法
- WPS PDF转Word工具
- javax.validation.constraints.NotNull找不到
- pear php linux,linux下安装PEAR、Zend Debugger和Smarty
- pear php5.6,一键安装php5.6.40脚本
- 本周言论 之 C2C模式