老网站改版做别的,互联网公司排名保定,定制小程序开发公司,最新军事动态最新消息视频0.1、css引入界面的方式: 内联式:通过标签的style属性#xff0c;在标签上直接写样式。 div stylewidth:100px; height:100px; background:red /div 嵌入式:通过style标签#xff0c;在网页上创建嵌入的样式表。 style typetext/css在标签上直接写样式。 div stylewidth:100px; height:100px; background:red /div 嵌入式:通过style标签在网页上创建嵌入的样式表。 style typetext/css div{ width:100px; height:100px; background:red } /style 外链式:通过link标签链接外部样式文件到页面中。 link relstylesheet typetext/css hrefcss/main.css 0.2、css选择器:
标签选择器 类选择器 层级选择器 0.3、 属性(常用): 布局常用: width,height,background,border,solid(实线),padding, margin,float,opacity:0.3(元素透明度),z-index:1(表示层叠,值越大越上面) 文本常用样式属性; color,font-size ,font-family ,font-weight ,line-height, text-decoration(去下划线),text-align(文字对齐方式),text-indent(文字首行缩进) 0.4、元素溢出: overflow:visible(默认值)不会被修剪 hidden:被修剪,其余内容不可见 scroll:被修剪,但是浏览器会有一个滚动条看其余内容 auto:如果被修剪就会有滚动条 0.5、分栏: p这一段文字用来测试分栏。这一段文字用来测试分栏。这一段文字用来测试分栏。/p p { width: 200px; /* 把段落的宽度设短一点便于效果的展现 */ column-count: 3; /* 设定需要分几栏 */ column-gap: 20px; /* 设定两栏间隔 */ } 1.1、盒模型: 包括:内容(content),填充(padding),边框(border),边距(margin). 我们给元素设置的高度,是内容(content)的高度,再给元素添加填充(padding), 这样的话会让原本的元素看起来更高,因为会撑起 1.2、无语义:没有任何样式的元素(就是没有行高,间距,颜色之类的东西),比如div 1.2 以边框为界的盒模型: box-sizing:border-box/box-sizing:border-box 有些时候,我们不希望给元素填充(padding)时,元素高度改变,不利于我们布局,就可以 使用上面的方法,在IE的怪异模式下,使用了这种模式 ... div classbox-modelbox-model/div ... typle .box-model { box-sizing: border-box; /* 设置成以边框为界的盒模型 */ border: 1px solid red; height: 80px; padding: 10px; } /typle 1.3、行内元素(inline),块元素(block) 布局一般都用块元素: 1.3.1 块元素可以设置宽高,默认占据一行,行内元素不能设置宽高,宽度由其内容决定 1.3.2 块元素默认没有高度,有内容才会有高度. 行内元素默认没高度和宽度,有内容才会有,行内元素虽然不能设置宽高,但是设置 成绝对定位(absolute)后,可以设置宽高. 1.3.3 块元素: div/div p/p ul/ul li/li table/table form/form header/header section option/option /section footer/footer dl/dl dd/dd 行内元素: a href/a font/font em/em strong/strong i/i img src alt span/span 空元素: br hr img input typetext link relstylesheet href meta 1.3.4 一行只有一个块元素,但是行内元素可以有很多个,空的元素将在布局的时候消失 1.3.5 行内块元素: inline-block 三个li并列都设置成inline-block。当对最左边的元素设置display:none;时 其他两个li会下沉到容器的底部。此时需要对这两个li设置顶部对齐vertical-align:top; ul classnav idnav li classleftdiv classhidden首页/div/li li classcenterdiv文章/div/li li classrightdiv留言/div/li /ul .hidden {display: none;} .left {height: 50px;} .center,.right {vertical-align: top;} 1.3.6 隐藏元素: visibility:hidden; display:none; //隐藏元素并且会清除原本占用的布局空间 1.4、位置(position): 1.4.1 绝对(absolute),相对(relative),固定(fixed) 移动:left,right,top,bottom 清除布局空间的定位(absolute fixed) 1.4.2 固定定位fixed不会随着鼠标的滚动而改变位置。 他真的是固定屏幕的某一个位置的比较常见的是网页右下角的广告 绝对定位absolute的定位原点是非默认定位static的父节点。 可以是absolute fixed relative如果父节点没有这些那定位原点就是body了。 使用了这两种定位中的一种元素原本占用的布局空间将会消失脱离文档流) 1.4.5 相对定位(relative): 相对原有位置定位。 使用这种方法元素原本占用的布局会保留。 父级采用relative子代采用absolute。则子代的定位原点变为父级元素的左上角 默认定位:static 浮动(float): 居中一个浮动元素: Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -250px; 居中一个普通元素: margin:0 auto; 清除浮动(overflow:hidden;): 使用这种方法意味着浮动元素得有一个父元素并给父元素添加overflow:hidden;属性。 .nav { overflow: hidden; } 清除浮动(.clear): 这种方法需要在浮动元素后面添加一个空的节点然后写上clear属性。兼容IE6需要添加zoom:1;。 div classclear/div !--用来清楚浮动的空元素-- css选择符有哪些: id选择器 # myid 类选择器.myclassname 标签选择器div, h1, p 相邻选择器h1 p 子选择器ul li 后代选择器li a 通配符选择器 * 属性选择器a[rel “external”] 伪类选择器a: hover, li: nth - child 1.5、 display的值 block 象块类型元素一样显示。 none 缺省值。向行内元素类型一样显示。 inline-block 象行内元素一样显示但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示并添加样式列表标记。 1.6、 权重: 标签:权重为:1 类选择器:权重为:10 id选择器:权重为100 权重可以相加的:如#id div的权重就是101 内嵌在标签里面的style属性的权重为1000 权重相同时,最后定义的样式会起作用,一般都要尽量避免这样的情况 1.7、 优雅降级: web站点在所有新式浏览器中都能正常工作,如果是老式浏览器,就会检查是否能正常工作, 如果不能支持功能就为那些浏览器增加候选方案,使之在旧式浏览器上能以某种形式降级体验 ,但是却不至于完全失效. 渐进增强: 从被所有浏览器支持的基本功能开始逐步地添加那些只有新式浏览器才支持的功能, 向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时它们会自动地呈现出来并发挥作用。 本文转载于:猿2048➺https://www.mk2048.com/blog/blog.php?idjakhaibtitle前端html,css基础总结
