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 文本每一行的高度