css
Himalaya@hsf
雪的故乡,人生追求圣地!
展开
-
CSS基础(1)[基础选择器和基础样式]
css的概念知识点1.什么是css样式 HTML 超文本标记语言 从语义的角度描述页面结构。 CSS 层叠式样式表 从审美的角度负责页面样式。 JS JavaScript 从交互的角度描述页面行为。 全称:Cascading Style Sheet(层叠样式表)的缩写 作用:用于控制网页外观。(修饰和美化html)...原创 2019-08-26 11:54:39 · 140 阅读 · 0 评论 -
网页优化
图片整合与浏览器兼容定义:图片的整合又叫css精灵,是将小的图标,按钮等有规则的合成一张背景图,然后后利用属性background-position来实现元素需要的背景图片的定位技术;对于一般background-position的属性值(先水平后垂直)一般都是负值;对于图片整合是现在的主流技术;优势:可以减少服务器的请求次数,提高页面的加载速度; 通过整合图片来减小图片的体...原创 2019-08-27 12:00:34 · 511 阅读 · 0 评论 -
BFC
过滤器_(只有ie6能识别) _height:value;*(只有ie6、7识别) *height:value;!important 优先级最高 (ie6识别不了) height:value !important;<!doctype html><html><head><meta charset="utf-8"><t...原创 2019-08-27 11:45:02 · 113 阅读 · 0 评论 -
宽高自适应
宽高自适应需求:网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。1、块元素在不设置宽度的情况下 width:auto;(默认)和父元素一样宽子元素盒模型总大小=父元素的width子元素设置了padding border mar...原创 2019-08-27 11:39:39 · 93 阅读 · 0 评论 -
图片垂直居中
图片垂直居中图片垂直居中1<!doctype html><html><head><meta charset="utf-8"><title>图片垂直居中1</title><style>.box{width:500px;height:500px;border:1px solid #000;text-a...原创 2019-08-27 11:33:37 · 75 阅读 · 0 评论 -
css使用技巧
CSS使用技巧知识点1.CSS对齐margin属性针对水平对齐把左和右外边距设置为 auto,规定的是均等地分配可用的外边距。注意:除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。 position 属性进行左和右对齐对齐元素的方法之一是使用绝对定位position:absolute;right:0px;使用 float ...原创 2019-08-27 11:31:14 · 83 阅读 · 0 评论 -
css布局(响应式、多列、弹性)
响应式布局(媒体查询)什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。为什么响应式设计需要,媒...原创 2019-08-27 11:23:28 · 854 阅读 · 0 评论 -
css动画和特效
特效知识点1.box-shadow盒子阴影 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS 颜色值。 inset 可选。将外部阴影 (outset) 改为内部阴影。 box-shadow: h-shadow v-shad...原创 2019-08-26 18:00:11 · 534 阅读 · 0 评论 -
定位
定位position:(定位属性)static 默认值所有元素默认的定位属性就是static 一般不用absolute 绝对定位 (完全脱离文档流)自动向上检索 以最近的定位元素作为父元素 若检索不到就以html为父元素 来定位relative 相对定位根据自身初始所在位置来定位fixed 固定定位(完全脱离文档流)根据浏览器来定位sticky 粘性定位(css3属性)...原创 2019-08-26 17:57:47 · 164 阅读 · 0 评论 -
浮动布局
浮动布局浮动属性float: none 默认不浮动 left 左浮动 right 右浮动*说明:页面出现上下布局时都用2个兄弟块元素来实现 而左右布局时 行元素因无法设置宽高这一点 无法实现我们经常想要的效果 所以有了浮动属性 浮动属性就是让 所有元素能够实现左右结构而存在 但是浮动元素也有很多不敬人意的地方。 如果父框未设置高度 则会出现“高度塌陷”的问题...原创 2019-08-26 17:46:42 · 485 阅读 · 0 评论 -
盒模型
盒模型知识点1.盒模型概念盒模型指在css布局中,浏览器会把html中的每个标签元素解析成为一个盒子,这些标签元素拥有盒子一样的外形和平面空间。这样的盒子由 margin , border , padding , content 四部分组成。知识点2.尺寸 width 设置元素宽度 height 设置元素的高度。 line-height 设置行高。 max-height 设置元素...原创 2019-08-26 17:27:06 · 116 阅读 · 0 评论 -
css小坑
<html><head><meta charset="utf-8"><title>h小坑</title><style>/* h标签里静止放h标签 会父子边兄弟 你养了12年的儿子会变你弟弟 */h3{height:60px;background:#f99;}h4{height:60px;background:#0...原创 2019-08-26 17:11:33 · 212 阅读 · 0 评论 -
css(显示与隐藏、溢出)
显示与隐藏、溢出知识点1.visibility 显示隐藏设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间。这意味着元素仍占据其本来的空间,不过可以完全不可见。 visibility:hidden与display:none的区别 visibility:hidden设置不可见的元素也会占据页面上的空间。 display:none设置元素的不可见...原创 2019-08-26 17:09:18 · 4233 阅读 · 0 评论 -
css(列表、表格)样式
列表样式列表 li 独有的属性list-style-type[设置列表符号] disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);list-style-image:url(路径); [自定义图片列表符号]list-style-position:outside(默认外边)/inside(里边);[定义符号所在位置]list-style:non...原创 2019-08-26 16:56:46 · 310 阅读 · 0 评论 -
css的(文字、背景、段落)样式
文字样式属性:font-style:normal/ italic [设置文本为斜体]font-weight:normal(100-500)/ bold(600-900) [设置文本为粗体]font-family: “文本字体1”,”文本字体2”; [文本类型]text-align:left/center/right [文本水平对齐方式]vertical-align:top/mid...原创 2019-08-26 16:50:08 · 4685 阅读 · 0 评论 -
css继承和权重
CSS继承和权重知识点1.CSS继承性就像父亲的财产可能会遗传给儿子一样,在CSS中祖先元素的样式同样也会被子元素继承。继承是指应用在一个标签上的那些CSS属性被传到其内嵌标签上的过程。比如为父元素设置了字体颜色,子元素也会应用上相同的颜色。当然并不是所有的样式都会被继承, 哪些属性能继承? color、 text-开头的、line-开头的、font-开头的。 这些关...原创 2019-08-26 16:13:06 · 1173 阅读 · 0 评论 -
CSS选择器
CSS选择器知识点1.全局选择器* *{margin:0 0;}一般用来重置样式知识点2.标签选择器h1h1{width:30px; height:40px;}知识点3.类别选择器,class一个类别选择器用在多个标签上.data{background:red;}一个标签上可以有多个类别选择器知识点4.Id选择器#a1{background:green;}知识点5.伪类选...原创 2019-08-26 11:58:13 · 1536 阅读 · 0 评论 -
布局和五大居中
布局圣杯布局骰子布局网格布局静态布局 (常见布局px)流式布局 (百分百布局)输入框布局悬挂式布局多列布局响应式设计布局概念移动端布局rem永远继承html的字体大小一般结合响应式布局和js的配合实用,vw永远获取屏幕的百分比,比较实用;/*以宽高640px,88px*/html{ font-size:15.625vw;}/*rem就是html的值,然而...原创 2019-08-27 13:52:35 · 123 阅读 · 0 评论