CSS
1. CSS 指层叠样式表(Cascading Style Sheets)
2. 使用 CSS 同时控制整个站点的样式和布局。
3. 通过与 XHTML 结合,CSS 可以帮助我们实行表现与结构分离的开发模式。
4. 规定网页的布局
pinkowonote
汤家凤:你这个年纪你怎么能睡得着觉?
展开
-
CSS overflow 属性
overflow属性值:举例:overflow:visible显示:内容会在元素框之外呈现overflow:hidden显示:显示在元素框外的内容会被隐藏,不可见overflow:scroll显示:显示在元素框外的内容会被隐藏,但是会显示右下滚动条,用来查看隐藏内容***(无论是否有内容被隐藏,都会显示出右下滚动条)***overflow:auto显示:只有在有内容溢出时才会显示右滚动条,内容不溢出不会显示滚动条...原创 2020-11-09 16:03:56 · 152 阅读 · 0 评论 -
定位
定位:让盒子自由的在某个盒子内移动位置,或者固定在屏幕中的某个位置,并且可以压住其他盒子定位 = 定位模式(指定一个元素在文档中的定位方式) + 边偏移(决定该元素的最终位置)定位模式:static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 边偏移:top,right,left,bottom定位模式:1. 静态定位:static:元素默认定位方式(无定位)是在标准文档流中摆放位置,没有边偏移(没有脱原创 2020-08-10 15:52:15 · 103 阅读 · 0 评论 -
浮动float
很多布局效果标准流实现不了,可以利用浮动来完成。——>浮动可以改表标签默认排列方式<hr/>多个块级元素纵向排列用标准流: 多个块级元素横向排列用浮动: <hr/>float属性:用于创建浮动框,将其移到一边,直到左边缘或右边缘触及到包含快或另一个浮动框的边缘。<hr/>增加了float属性的元素:1.会脱离标准文档流(脱离标准普通流的控制(浮),移动到指定位置(动),浮动的盒子不再保留...原创 2020-08-08 10:31:35 · 148 阅读 · 0 评论 -
行内元素和行内块元素水平居中
行内元素和行内块元素水平居中,只需要给他们的父亲设置text-align:center原创 2020-08-07 22:07:56 · 354 阅读 · 0 评论 -
块元素水平居中margin
水平居中:1. 设置div盒子的宽度2. 设置margin左右为auto原创 2020-08-07 22:05:29 · 147 阅读 · 0 评论 -
padding
个数 意义 padding:2px 上下左右2px padding:2px 10px 上下2px 左右10px padding:2px 10px 5px 上2px 左右10px 下5px padding:2px 10px 5px 6px 上2px 右10px 下5px 左6px 当盒子没有指定width或者heigth时,padding不会撑开盒子的width或者heigth子元素默认width是父元素宽度的100%,如果没有weight属性,不增加pa原创 2020-08-07 21:59:02 · 112 阅读 · 0 评论 -
CSS三大特性(层叠性、继承性、优先级)
1. 层叠性相同选择器(不同选择器优先级不同,如果这里是不同的选择器则不遵循就近原则)设置样式属性一样,属性值不同,此时后个样式就会覆盖(层叠)前一个冲突的样式。CSS层叠性主要解决样式冲突的问题:样式冲突,就近原则2. 继承性CSS中的继承:子标签会继承父标签中的某些样式(text-,font-,line-,color)inherited from 父标签行高的继承:line-height可以加单位,也可以不加单位不加单位的行高表示:当前元素文字大小font-size的XX原创 2020-08-07 17:37:56 · 185 阅读 · 0 评论 -
背景background
1. background-color:元素默认背景颜色默认值是transparent(透明的)2. background-repeat:repeat、no-repeat、repeat-x、repeat-y背景颜色在背景图片之下3. background-position:背景图片在背景中的位置background-position:x y / 方位名词 / 精确单位;background-position:center top;(无顺序)如果只指定了一个方位名词,另一个值省略,则这原创 2020-08-07 16:19:39 · 280 阅读 · 0 评论 -
单行文字垂直居中line-height
让文字的行高等于盒子的高度height = line-height行高line-height = 上空隙 + 文字本身高度 + 下空隙行高的上空隙和下空隙把文字挤到中间了,如果是行高<盒子高度:文字偏上;如果行高>盒子高度:文字偏下...原创 2020-08-07 15:39:21 · 179 阅读 · 0 评论 -
元素的显示模式:块元素、行内元素
元素的显示模式:元素(标签)以什么方式进行显示的1. 块元素独占一行、宽度高度外边距内边距都可以设置、【宽度】默认是父容器宽度100%文字类的元素内不能使用块元素:p、h1~h62. 行元素(内联元素)一行上可以显示多个、宽高设置都是无效的、默认宽度就是本身的宽度、行内元素只能收纳文本或其他行内元素a链接里不能再放链接a链接里可以放块级元素,但是给a转换成块级模式是最安全的3. 行内块元素img、input、td同时具有块元素和行内元素的特点和相邻行内元素(行内块元素原创 2020-08-07 15:21:08 · 342 阅读 · 0 评论 -
伪类选择器
1. 链接伪类选择器:为了保证生效,按照lvha顺序声明::link:未访问过的链接:visited:点击过的,访问过的链接:hover:鼠标放在连接上:active:鼠标点击上去的时候a链接在浏览器中有默认样式,需要单独制定a的样式一般只会制定a和a:hover的样式2. :focus伪类选择器(主要针对表单元素来说)选取获得焦点(光标)的表单元素<input>input:focus...原创 2020-08-07 10:57:02 · 114 阅读 · 0 评论 -
text-indent和em/rem/px【哎】
text-indent:首行缩进https://www.cnblogs.com/leejersey/p/3662612.htmlem:相对当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)任意浏原创 2020-08-06 16:12:27 · 464 阅读 · 0 评论 -
font
1. font-weight:粗细一般用数字来表示:400是正常,700是加粗2. font-style斜体Italic样式一般是指书写体,相比无样式的字体,通常会占用较少的高度倾斜体oblique字形一般只是常规字形的倾斜版本:font-style: oblique 0deg;一种字体有粗体、斜体、下划线、删除线等诸多属性。但是并不是所有字体都做了这些,一些不常用的字体,或许就只有个正常体,如果你用 italic,就没有效果了~这时候你就要用 oblique,可以理解成 ita..原创 2020-08-06 11:02:08 · 185 阅读 · 0 评论 -
CSS尺寸
原创 2020-08-06 10:50:34 · 64 阅读 · 0 评论 -
CSS 属性选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src=.原创 2020-08-03 17:15:52 · 141 阅读 · 0 评论