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