1.strong表示加粗,em倾斜,div大盒子,span小盒子
2.图片的高度和宽度一般情况下修改一个就行,等比例缩放
3.相对路径/, 绝对路径\
4.a超链接, _self在原来的窗口打开新页面,_blank在新窗口打开新页面,分为外部链接和内部链接,href=’#’ 表示空链接, 还有下载链接,href里是文件(.exe)或者压缩包(.zip)等形式
网页中的各种元素,如图片、文本、表格、音频、视频等都可以添加超链接
另外还有内部链接,可实现文件内两个页面之间的跳转。
5.锚点链接,可以快速定位到页面中的某个具体位置。
6.表格分为thead和tbody两部分, cellpadding和cellspacing一般为0
跨行合并在上侧,跨列合并在左侧。
7.ul中只能嵌套li, 输入其他标签或者文字是不被允许的,但li中可以容纳所有元素
8.dl自定义列表,dt是项目的名字,dd是描述每一个项目。
9.form表单用于收集用户的信息,input输入表单元素(input为单标签),其中单选框radio和复选框checkbox需要设置相同的name,value值只在文本框中能看到效果,在单选框和复选框中是看不到效果的,为后台服务的。
单选按钮和复选框可以设置checked属性,实现当页面打开时就可以默认打开这个按钮。
10.label标签用于绑定表单元素
11.select下拉表单元素,select中至少包含一对option, 在option中定义selected="selected"时,当前项即为默认项。
12.标题标签比较特殊,需要单独指定font-size.
13.实际开发中,我们更提倡使用数字来表示加粗或者变细 font-weight。
14.字体连写是有顺序的,不能随意更换位置,另外字号和字体不可省略。
15.2em是当前元素两个文字大小的距离。
16.给图片加对齐是没有效果的,可以把图片看成文字,给图片的父亲加上居中对齐的效果。
17.伪类选择器, 其中a:active 选择的是鼠标正在按下但还没有弹起的那个链接。
实际开发中,a:hover用得最多。
18.a链接在浏览器中具有默认样式,所以实际工作中我们需要给链接单独指定样式。
19.input:focus 用于给光标选中的input表单修改样式。
20.文字类的元素内不能使用块级元素,比如 p,h1~h6标签,里面是不能放div的。
21.行内元素的宽、高直接设置是无效的,默认宽度就是它本身内容的宽度, 行内元素中只能放文本或其他行内元素。但是链接里面不能再放链接了。特殊情况链接a里面可以放块级元素。
22.行内元素可以转换为块元素,块元素也可以转换为行内元素
display:block display:inline
23.设置行高等于盒子高度可以实现垂直居中。
24.background-position,如果指定的两个词都是方位名词,则前后顺序无关,left top和top left是一样的,如果只指定了一个方位名词,另一个值省略,则另一个值默认居中对齐。
如果参数是精确单位,那么第一个一定是x的,第二个一定是y的,如果只指定一个数值,那么该数值一定是x坐标,另一个默认垂直居中。
25.border-collapse:collapse用于设置将表格的相邻边框合并在一起。
26.padding:两个值,上下和左右
padding:三个值, 上,左右,下
padding:四个值,上,右,下,左
27.如果盒子本身没有指定width/height大小,则此时padding不会撑开盒子大小。
28.外边距可以让块级的盒子水平居中,首先设置盒子的宽度,其次将左右外边距都设置为auto
行内元素或者行内块元素实现水平居中可以将其父元素添加text-align:center.
29.行内元素为了照顾兼容性,尽量只设置左右内外边距,不设置上下内外边距,但是转换成块级和行内块元素就行了。
30.脱标之后,浮动的盒子不再保留原先的位置。
添加浮动之后,元素就会具有行内块元素相似的特性。
如果块级盒子没有设置宽度,默认宽度和父亲一样宽,但是添加浮动之后,它的大小根据内容来决定。
31.清除浮动
(1)给父级元素添加overflow:hidden
(2)套模板
32.CSS属性书写顺序:
1.布局定位属性,如display/position/float
2.盒子自身属性, 如width/height/margin/padding
3.文本属性, color/font/text-decoration/text-align
4.其他CSS3的属性,如content, cursor, border-radius
33.实际开发中,我们不会直接用链接a, 而是li加链接(li+a)的做法。
34.Button元素默认是有边框的,行内块元素之间默认有缝隙。
浮动的两个盒子之间是没有缝隙的
35.浮动的盒子不会有外边距合并的问题
36.行高line-height会继承
37.相对定位:相对于自己原来的位置移动
绝对定位:相对于祖先元素来移动的
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为标准
2.如果祖先元素有定位,则以最近一级有定位的祖先为参考点移动
3.绝对定位不再占有原先的位置,脱标
固定定位:以浏览器的可视窗口为参照点移动,固定定位也是脱标的,不再占有原来的位置,可以把固定定位看成是一种特殊的绝对定位
粘性定位:相对定位和固定定位的混合体
38.如何固定在版心的右侧:
1.先让固定的盒子left:50%, 走到浏览器可视区域的一半
2.再让固定的盒子margin-left 版心宽度一半的距离,即多走版心宽度一半的距离
39.加了绝对定位的盒子是不能通过设置margin: 0 auto 设置水平居中的,绝对定位的盒子实现居中
1.left:50%,让盒子的左侧移动到父级元素的水平中心位置
2.margin-left: -n px, 让盒子向左移动自身宽度的一半
40.绝对定位和固定定位也和浮动类似
1.行内元素添加了绝对或者固定定位,不需要转换为块元素,可直接设置宽度和高度。
2.块级元素添加了绝对或者固定定位, 如果不给高度和宽度,默认大小是内容的大小。
3.浮动元素,绝对定位(固定定位)的元素都不会触发外边距合并的问题。
41.浮动的元素只会压住它下面标准流的盒子,但不会压住盒子里面的文字
但绝对定位(固定定位)会压住它盒子下面的所有内容。
42.相对定位的盒子不脱离标准流, 使用 margin: 0 auto可以实现水平居中
43.如果一个盒子既有left属性,又有right属性,则按照先左后右的原则,同理先上后下
43.display属性用于设置一个元素应该如何显示
1.display:none 隐藏元素
2.display: block 除了有转换为块级元素,还有显示元素的作用
display隐藏元素之后,不再占有原来的位置
44.visibility: visible 元素可视
visibility:hidden 元素隐藏
与display不同,visibility隐藏元素后,继续占有原来的位置
45.overflow 属性设置了溢出的内容该如何显示
overflow: visible , overflow :hidden 溢出的部分隐藏
但是如果有定位的盒子,慎用overflow: hidden ,因为他会让多余的部分隐藏起来
46.tudou:hover .mask {display: block},
当鼠标经过tudou这个盒子时,让mask这个盒子显示出来
47.CSS三角形的做法
宽高都为0, 设置某一个边框border-left-color有颜色, 其余边框透明
48.文本域标签textarea尽量写在一行上, 这样就不会有空格
outline: none 取消表单轮廓, resize: none防止拖拽文本域
49.图片和表单都属于行内块元素, 给行内块元素的 vertical-align 属性设置为middle, 就可以让文字和图片实现水平居中对齐
50.解决图片底部默认空白缝隙的问题
1.给图片添加属性 vertical-align: bottom/top/middle
2.把图片转换为块级元素 display: block
51.单行溢出文字显示省略号
white-space: nowarp, 强制一行内显示
overflow: hidden
text-overflow: ellipsis
多行溢出文字显示省略号
52.给行内块元素的父亲添加text-align:center 就可以让行内块元素水平居中
53.在IE9中,需要将header、nav、footer等元素转换为块级元素
54.我们验证的时候必须添加form表单域
55.修改placeholder里面的字体颜色
input :: placeholder{
color:pink;
}
56.nth-child和nth-of-type的区别
nth-child会把所有的盒子都排列序号,div:nth-child 执行的时候先看nth-child再去看前面的div
nth-of-type会把指定元素的盒子排列序号,div:nth-of type 先看div, 再去看nth-of-type第几个孩子
57.before和after创建一个行内元素,权重为1
58.box-sizing:border-box, padding和border就不会撑大盒子的大小
59.text-align对行内元素和行内块元素有作用
60.一般情况下,a如果包含有宽度的盒子,a需要转换为块级元素
61.translate最大的优点:不会影响其他盒子的位置,里面的参数可以是百分比,相对于自己的宽高而不是浏览器的大小,另外对行内标签没有效果
62.transform: scale 的优点:不会影响其他的盒子,而且可以设置缩放的中心点
63.2D转换综合写法:位移translate()要写在最前面
64.translate3d中的translateZ一般写px单位,不能写百分比
65.透视写到被观察元素的父盒子上面
66.transform-style: preserve-3d 子元素开启立体空间,给父元素加, 影响的是子盒子
67.二倍图:为了解决移动端放大后清晰度的问题
68.移动端常见布局:
流式布局(百分比布局)
flex布局(伸缩布局)
69.align-items单行
align-contentduohang
70.固定定位的盒子必须要有宽度
71.定位的盒子用margin没有效果,只能通过top, left来修改
72.margin:auto 只对块级元素有效