CSS 学习笔记
|
问题
|
答案
|
| 背景透明度 |
#99999911
最后两位是透明度
|
|
下划线
|
text-decoration
|
|
padding margin都有默认值吗
|
有
|
|
后代选择符
|
li a{ }
a 即是 li 的后代
|
|
子选择符(即不是孙)
|
div > strong{
}
|
| 通配选择符 |
*
|
|
相邻选择符
|
li + li { }
即紧贴在第li后紧挨的li，注意只对后面的li生效
|
|
属性选择器
|
a[href="baidu.com"]{
}
|
|
以空格分隔挑选型的属性选择器
|
li[class~="warning"]{
}
|
|
伪类
|
a:link
a:visited
a:hover
a:active
:first-child
:focus
:lang(n)
|
|
伪元素
|
:first-letter :first-line :before :after 。 我觉得没意思，只是一些规则而矣，就像语法糖。
|
|
id选择符最佳实践
|
应用于整体网页的大块分隔元素，比如 header content navigation siteinfo等
可以和标签选择符，类选择符，配合使用。比如 #content h3{}
|
|
修改li的前符
|
line-style-type: square;
|
|
文本对齐
|
text-align left right center justify(文本从左延伸至右)
|
|
每个Html页面都必须定义 DocTypes 简称
DTD
|
这样才能保证 html验证器 和 css验证器 能正常工作
|
|
导入样式方法
|
外部
<link href="test.css" rel='stylesheet' type='text/css' media='screen'/>
内部 <style> 里
内联
|
|
媒体类型
|
比如在打印时应用 print的css 这没什么用
|
|
切换样式表
|
<link href="test.css" rel='stylesheet' type='text/css' media='screen' title="a"/>
可用用 title 切换。 在浏览器里切换
|
|
postion
|
absolute 相对于浏览器窗口 top bottom left right 都是相对于窗口
relative 相对于元素在自然流中的定位的重新相对定位 top bottom left right 都是相对于原始位置
|
|
font-family
|
设置多个值，浏览器会依次去解析，直到能解析为止
最后一个通常是 serif，sans-serif 或 monospace
|
|
属性继承
|
大多数属性可以继承
除了和盒模型相关的 比如 margin padding border background
|
|
文字大小的设置
|
百分比
长度单位
有两类，绝对长度和相对长度
绝对长度包括 in cm mm pt pc 一个pt是1/72英寸
相对长度 em px
font-size关键字
|
|
像素
|
从实际物理尺寸来说，是一个相对单位
按照大小和网页的比率来看，它则是绝对单位
|
|
em
|
常用，但是 比 1em更小的文字有时很难看清
|
|
关键字方案
|
font-size xx-small x-small small medium large x-large xx-large larger smaller
|
|
一种好实践
|
web排版默认的文字大小是16px
body{ font-size: 62.5% }
这样 1em 就是 10px
|
|
强制
|
! important
|
|
text-align 用在哪种标签里
|
只能用于块级，不能用于行内级
|
|
行首缩进
|
text-indent
|
|
行距
|
line-height
|
| 字符间距 |
letter-spacing
word-spacing
|
|
background-position
|
可设数字 50px 60px 即 x 和 y
可设百分比 50% 即屏幕正中央
|
|
js库实现圆角
|
niftycube.js
|
|
给滚动条着色
|
比如 scrollbar-face-color 等
|
|
一个横向居中技巧
|
margin-left 和 margin-right 都设置为 auto
|
|
要让图片元素居中的办法
|
首页在外面包一层div，因为div作为块级元素能占一行。
而img是行内元素，不会自动占一行
{
display:block;
margin:0 auto;
}
|
|
所有元素居中对齐最好的方式
提前并不知道元素的宽和高
|
position: absolute;
left: 50% ;
transform: translateX( -50% ) translateY( -50% ) ;
top: 50% ;
|
|
在页面的最上层显示一张图片
|
用 lightbox
|
|
改变列表的标记
|
li:before{
content: ">>"
或
list-style-image: url( bullet.eps )
|
|
tips
|
title属性
|
|
input 的type
|
竟然还有一个 search
|
|
页面布局
|
div三纵排列时 多使用 float: right
float: right
等
|
| float 浮动 |
取值有 right 或 left
|
|
flex
|
要学一下flex布局 。用一天的时间学习一下
block是垂直方向
inline是水平方向
flex没有这些限制
|
|
display的值
|
none
block 块元素
inline 内联
inline-block 行内块元素
|
|
position的值
|
默认 static 正常文档流定位
relative 相对定位
absolute 绝对
fixed 相对于窗口定位
|
|
background-origin 有哪些值
|
content-box
padding-box
border-box
|
|
文字阴影
|
box-shadow: 10px 10px 5px #888888
|
|
overflow
|
当溢出内容区时
scroll 必会出现滚动条
auto 子元素内容大于父元素时出现滚动条
visible 溢出的内容出现在父元素之外
hidden 溢出隐藏
|
|
需要学习一下 CSS Sprites
|
|
面试题
|
问题
|
答案
|
|
简述盒模型
|
padding border margin
|
|
box-sizing
|
content-box 表示width只应用于content
border-box 表示width应用于 content padding border
|
|
不可继承的样式
|
padding border margin width height
|
|
样式优先级
|
!important最高
后出现的高
继承的最低
|
|
如何让div居中
|
|
|
display:none
visibility: hidden
|
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
|
| 浏览器如何解析css |
从右向左解析
|
|
|
|
|
所有元素的默认锚点
|
它的物理中心
|
|
改变锚点位置的方法
|
transform-origin: x-axis y-axis z-axis
|
|
ps里可以获取 css
|
选择层级 copy css
|
|
css全称
|
cascading style sheet 层叠样式表
|
|
css的目的
|
内容和表现的分离
|
|
文本对齐
|
text-align
|
|
文本是绿色
|
color （注意不是font-color也不是text-color）
|
|
背景的颜色
|
background-color
|
|
让背景透明
|
background-color: transparent
|
|
子元素和父元素的样式关系
|
子元素继承父元素的样式
|
|
有哪些选择器
|
标签选择器 类选择器 id选择器
|
|
样式表的优先级
|
外部样式表 内部样式表 内联样式表 ，后面的优先级高
|
|
斜体字
|
font-style:italic
|
|
粗体字
|
font-weight:bold
|
|
1个像素的黑色点状边框
|
border:1px dotted #000000
|
|
周围有10个像素的内边距
|
padding: 10px
|
|
属性和值选择器举例
|
[title=runoob]
{
border:5px solid green;
}
title是属性
runoob是它的值
|
|
设置背景图
|
background-image:url(/a/b/c.jpg)
2019-03-17的我认为后面的路径是相当于网站根目录
|
|
devicePixelRatio 设备像素比
|
视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2.
|
|
背景图的重复方法
|
background-repeat:
可选值有 repeat-x repeat-y no-repeat
如果不设置本属性，则在x和y向都无限平铺
|
|
手动画一个圆角背景
|
border-radius: 1rem 1rem 1rem 1rem
|
|
背景图如何定位
|
background-position
有5个值 right left top bottom center
选一个代表横向的，选一个代码纵向的
|
|
background-origin什么意思
|
它有三个值
content-box
padding-box
border-box
学完盒模型后，再来理解它
|
|
background-attachment
|
背景图是否随内容上下拉而移动
fixed 不移动
scroll 移动
|
|
text-indent
|
20px
|
|
text-align 常用值有哪些
|
left right center 用好这三个
|
|
单词间横向间距
|
word-spacing
|
|
字母间横向间距
|
letter-spacing
|
|
字母的大小写
|
这个其实不重要
text-transform 有三个值
uppercase lowercase capitalize
|
|
下划线或者横穿线
|
overline
line-through
underline
|
|
框模型
|
element padding border margin
|
|
padding 的写法
|
padding: 上 右 下 左
也可以分开写成 padding-top padding-right padding-bottom padding-left
可以写正数 或 百分比
百分比 表示相对于父容器宽度的百分经
|
|
如何定义单边样式
|
border-top-style
|
|
margin
|
可以是数值 也可以是百分比
百分比也是父容器的宽为基准
外边距有合并现象
|
|
块级元素
行内元素
|
div h2 p
span strong
|
|
position有哪5个值
|
static
fixed
absolute
relative
sticky
|
|
定位属性
|
top bottom left right
|
|
fixed定位的特点
|
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
|
|
position是relative时
|
left bottom right top 的值是相关于其正常位置的偏移量
预留空间的元素仍保存在正常流动。
|
|
|
scss 是 sass 3 引入的新的语法
|
|
position是static时
|
top bottom right left z-index 都无效
即没有定位，元素出现在正常的流中
|
|
position是absolute时
|
top bottom right left 都生效
相对于static定位以外的第一个父元素进行定位
设置为绝对定位的元素框从文档流完全删除
|
|
最内层容器如何在中层容器的中间
|
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
|
第三部分 css定位 positioning
1 块级元素：div h1 p
2 行内元素：span strong, 行内框
3 一切皆为框
4 有三种定位机制：普通流 浮动流 绝对定位
5 行框 LineBox ，行内框，这个不太懂
6 position可能的值有
absolute ， 相对于static定位以外的第一个父元素进行定位，元素的位置用left top right botttom属性进行规定. 互相会覆盖， 设置为绝对定位的元素框从文档流完全删除
fixed 生成绝对定位的元素 相对于浏览器窗口进行定位，元素的位置用left top right botttom属性进行规定.
relative 生成相对定位的元素，相对于其正常位置进行定位
static 默认值，没有定位，元素出现在正常的流中。
inherit 继承父元素的position
7 padding-top 是相对于其邻居， 这句不一定对. 2018-12-1今天做了实验，这句是对的
top是相对于父亲 ？？ 2019-03-17 今天我又产生了怀疑
8 padding-top是百分比时分母是父级的值 （父级的什么值？）
top是百分比时，分母是父级纵向高度。
left是百分比时，分母是父级横向高度。
9 定位属性有 position top right bottom left overflow clip vertical-align z-index
有position属性的元素设置z-index才有效。
10 overflow: 性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible.
11 overflow的值有 scroll visible hidden
12 clip:rect(上切 宽 高 左切)
13 img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
14 line-height 文本每一行的高度
