![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
你真好看l
。。
展开
-
布局扩展-多列布局
多列布局(分栏布局)栏目宽度column-width栏目列数column-count栏目距离column-gap栏目间隔线column-rule原创 2020-02-02 21:54:14 · 182 阅读 · 0 评论 -
布局扩展-响应式布局核心
媒体查询是响应式方案核心 媒体类型 all 所有媒体(默认值) screen 彩色屏幕 print 打印机 projection 手持设备 tv 电视 braille 盲文触觉设备 embossed 盲文打印机 speech "听觉"类似的媒体设备 tty 不适用像素的设备 媒体属性 ...原创 2020-02-02 21:39:39 · 255 阅读 · 0 评论 -
布局扩展-flex布局
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。...原创 2020-02-02 20:36:14 · 258 阅读 · 0 评论 -
CSS3 动画
CSS3 动画当在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器: 规定动画的名称规定动画的时长 animation-name规定@keyframes动画的名称 animation-duration规定动画完成一个周期所花费的秒和毫秒。默认0 animation-...原创 2019-12-10 21:43:22 · 85 阅读 · 0 评论 -
3d变换
CSS 属性 perspective指定了观察者与 z=0 平面的距离,使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大,而 z<0 时则比正常小,大小程度由该属性的值决定。三维元素在观察者后面的部分不会绘制出来,即 z 轴坐标值大于 perspective 属性值的部分。 默认情况下,消失点位于元素的中心,但是可以通过设置 perspective-origin ...原创 2019-12-07 13:17:14 · 188 阅读 · 0 评论 -
css时钟
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css" id="css"> *{ margin: 0; padding: 0; } #clo...原创 2019-12-05 12:07:59 · 102 阅读 · 0 评论 -
百分比参照于谁
margin,padding,left参照于包含块的widthheight,top参照于包含块的heighttranslate(50%,50%)参照于自身的宽高background-position百分比参照于(图片区域-图片的位图像素值)...原创 2019-12-04 22:06:46 · 107 阅读 · 0 评论 -
扇形导航
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{/*禁...原创 2019-12-04 20:38:36 · 140 阅读 · 0 评论 -
2d变换
transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素 ,他有几个属性值参数:旋转:rotate()transform-origin定义旋转的基点,rotate()设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转位移:translate()translateX()tra...原创 2019-12-01 16:19:45 · 245 阅读 · 0 评论 -
css3过渡
css3过渡是指从一种样式逐渐改变为另一种样式的效果 必须规定两项内容: 1.希望把效果添加到哪一个css属性上(默认是all) 2.效果的时长 效果开始于指定的 CSS 属性改变值时。 CSS 属性改变的典型时间是鼠标指针位于元素上时transition-property(过渡属性的名称)默认值为all.表示所有可被动画的属性都表现出过渡动画,可指定多个transiti...原创 2019-12-01 14:12:10 · 179 阅读 · 0 评论 -
css径向渐变
CSS radial-gradient() 函数创建一个,用来展示由原点(渐变中心)辐射开的颜色渐变。 默认均匀分布#test{ width: 200px; height: 300px; background-image: radial-gradient(red,blue); } 不均匀分布:radial-gradnent(circle,red,bl...原创 2019-12-01 13:11:53 · 331 阅读 · 0 评论 -
css线性渐变
渐变是css3 image module新增图片类型,使用渐变可以在两种颜色间制造出平滑的渐变效果,用它代替图片,可以加快页面的载入时间,减小带宽应用。同时,因为渐变是浏览器直接生成的,他在页面缩放时效果比图片更好,因此可以更加灵活、便捷地调整页面浏览器支持两种渐变,线性渐变(linear-gradient),径向渐变(radial-gradient)线性渐变linear-gradient(...原创 2019-11-30 21:01:27 · 325 阅读 · 1 评论 -
css背景
css2背景:background-color:red;background-image: url(images/ghost.png);background-repeat: no-repeat||repeat||repeat-||repeat/y;background-position: center center;(该属可以用top right bottom left center中任意...原创 2019-11-28 19:31:18 · 72 阅读 · 0 评论 -
css3边框-图片
border-image CSS属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单,也不用在某些情况下使用九宫格了。使用 border-image 时,其将会替换掉 border-style 属性所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在,但一些浏览器可能没有实现这一点。特别注意,若 border-image-source(此值可用bord...原创 2019-11-28 17:48:12 · 393 阅读 · 0 评论 -
ie6下固定定位失效问题
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ie6下fixed失效问题</title> <!-- 相对定位相对于原来的位置 绝对定位相对于他的包含快 fixed相对于他的视口(不是初始包含快) 滚动条永远不会在...原创 2019-11-28 16:25:35 · 175 阅读 · 0 评论 -
层级
一个元素分两层,下半层是盒模型相关,上半层是文字相关。1.浮动提升层级,半层(可设置文本环绕图片)脱离文档流,但是有半层占据文档流位置 <div id="d1"> d1 </div> <div id="d2"> d2 </div> <div id="d3"> </div> ...原创 2019-11-28 16:16:18 · 183 阅读 · 0 评论 -
css3圆角属性
CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。该属性是一个 简写属性,将四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius,和 border-bottom-left-ra...原创 2019-11-28 15:15:05 · 383 阅读 · 0 评论 -
css3盒模型新增样式
1.盒模型阴影box-shadowbox-shadow 属性用于在元素的框架上添加阴影效果 ,该属性可设置的值包括,X偏移,Y偏移,阴影模糊半径,阴影扩散半径,和阴影颜色并以多个逗号分隔。 指定单个 box-shadow 的用法: 给出两个、三个或四个数字值的情况。 如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量 <offset-x> 和y轴上的偏移量...原创 2019-11-28 12:50:28 · 120 阅读 · 0 评论 -
css3文本新增样式
1.opacityopacity属性指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。当opacity属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,即使这个值没有被子元素继承。因此,一个元素和它包含的子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素有不同的opacity属性值。使用opacity属性,当属性值不...原创 2019-11-25 18:46:09 · 140 阅读 · 0 评论 -
css3自定义字体、字体图标
自定义字体@ font-face:@ font-face的是一个CSS规则,允许你输入自己的字体出现在网站上,即使在特定的字体在访问者的计算机上没有安装。这条规则最重要的是,它为设计师打开了一个全新的世界。您可以使用任何你喜欢的字体。<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...原创 2019-11-25 16:11:38 · 355 阅读 · 0 评论 -
css声明的优先级
选择器的特殊性 选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如0,0,0,0,0 一个选择器的具体特殊性如下确定 1、对于选择器给定的ID属性值,加0,1,0,0 2、对于选择器中给定的各个类属性,属性选择,或伪类,加0,0,1,0 3、对于选择器中给定的各个元素和伪元素,加0,0,0,1 4、通配符的选择器的特殊性为0,0,0,0 5、结合符对选择器...原创 2019-11-25 14:32:49 · 111 阅读 · 0 评论 -
选择器
1.基本选择器及其扩展:基本选择器:id选择器 #class选择器 .元素选择器 元素名后代选择器 空格 //下面所有子元素分组选择器 元素名1,元素名2通配选择器 *子元素选择器(直接后代选择器) > //第一代子元素相邻兄弟选择器 + //紧挨着的兄弟元素~ //后面的所有兄弟元素 (css3) 2.属性选择器存在和值选择器[attr] 包含at...原创 2019-11-24 20:37:39 · 76 阅读 · 0 评论 -
垂直水平居中
一.单行文本水平居中:text-align:center;单行文本垂直居中: line-height:元素高度;二.元素水平居中1.text-align + vertical-align(水平+垂直对齐)在父元素设置text-align和vertical-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素[注意]若兼容IE7-浏览器,将结构改...原创 2019-11-24 16:40:21 · 656 阅读 · 0 评论 -
清除浮动
方案一:给父元素一个固定的高度缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,扩展性不好不推荐使用。方案二:给父元素开启bfc浮动定位overflow优点:浏览器支持好,简单;兼容性还行,移动端使用多缺点:ie67没有bfc.设置 overflow: hidden, 容器以外的部分会被裁剪掉。需要开启haslayout.方案三:在子元素的末尾添加一个空的 div ,并设置...原创 2019-11-24 15:31:33 · 57 阅读 · 0 评论 -
BFC
1.box bfc概念box:css布局的基本单位box是css布局的对象和基本单位,直观说,一个页面由多个box组成元素的类型和display属性,决定了这个box的类型,不同类型的box,会参与不同的formatting Context因此,box内的元素会以不同方式渲染,有哪些盒子:block-level box:display属性为block,list-item,table的...原创 2019-11-24 15:14:29 · 80 阅读 · 0 评论 -
粘连布局
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> <title></titl...原创 2019-11-24 14:19:39 · 312 阅读 · 0 评论 -
flex三列布局
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #container{ ...原创 2019-11-24 13:59:42 · 1906 阅读 · 0 评论 -
双飞翼布局
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>双飞翼布局</title> <!-- 思想:1 浮动搭建布局 2margin调整三列在一行3在middle里加一个div,给这个div设置padding 和圣杯布局的相同在于:...原创 2019-11-24 13:32:41 · 100 阅读 · 0 评论 -
圣杯布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-11-24 13:03:53 · 80 阅读 · 0 评论 -
flex布局
一、Flex布局是什么?Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display: flex;}行内元素也可以使用Flex布局。.box{display: inline-flex;}Webkit内核的浏览器,必须加上-webkit前缀。.box{display: -webkit...原创 2019-11-15 12:37:08 · 71 阅读 · 0 评论