CSS
iuukai
种一棵树最好的时间是十年前,其次是现在。
展开
-
【前端布局归纳】静态、流式、圣杯、双飞翼、自适应、响应式、弹性 、瀑布流、栅格《单列、两列、三列、混合;inline-block布局、float布局》
文章目录一、【固定式】容器固定值,不随浏览器窗口变化改变1.单列布局2.混合布局:单双单3.混合布局:单三单二、【自适应】宽高比例值,大小随浏览器窗口而改变1.单列布局2.混合布局:单双单3.混合布局:单三单三、【固定式+自适应】侧栏固定,主体自适应1.混合布局:单双单2.混合布局:单三单(单侧栏固定)3.混合布局:单三单(双侧栏固定)四、【响应式】还未学到css3,尽情期待...... T...原创 2020-02-22 22:37:37 · 406 阅读 · 0 评论 -
【mark】单/多行文本内容溢出显示省略号...
????传送门:单行文字、多行文字溢出时省略号表示的多种解决方式;调整字符间距;段落首字母大写缩进效果;????单行 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;<!DOCTYPE html><html><head><meta charset="utf-8">...原创 2020-02-16 21:11:32 · 135 阅读 · 0 评论 -
【图片拼接/精灵图/雪碧图】background-position(背景[图]定位)的理解
【素材】<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!--<link rel="stylesheet" href="css/reset.css" /><link rel="styleshee...原创 2020-02-16 18:44:09 · 531 阅读 · 0 评论 -
font属性
所有CSS字体属性 属性 描述 font 在一个声明中设置所有的字体属性 font-family 指定文本的字体系列 font-size 指定文本的字体大小 font-style 指定文本的字体样式 font-variant 以小型大写字体或者正常字体显示文本。 font-weight ...原创 2020-02-15 21:36:26 · 2461 阅读 · 0 评论 -
初步认识常用两伪元素:before和:after
一、【要点】使用伪元素:before和:after时,必须设置content: '';属性,可空值,否则无效:二、【坑】行内元素的:before,属性content: '';为空值时,无效(还未找到原理,只能尽量用块级元素来设置伪元素了):三、【要点】伪元素制作三角形:????设置:after和未设置时的对比????<!DOCTYPE html><html><...原创 2020-02-15 15:58:45 · 306 阅读 · 0 评论 -
CSS之元素隐藏属性对比:overflow: hidden; visibility: hidden; display: none;
相同:三者都能使元素隐藏。区别:overflow: hidden;溢出隐藏。这个说是隐藏,倒不如说是裁剪,把超出显示的区域裁剪掉,与clip类似。visibility: hidden;隐藏可见性。这个是把元素隐藏掉,相当于100%透明,不可见,但是还是占位置,占空间。(相当于哈利波特披上隐形斗篷,他还能碰到物体)display: none;不显示。这个隐藏看不见也不占空间。...原创 2020-02-14 14:41:47 · 1076 阅读 · 0 评论 -
writing-mode排版属性
快速理解writing-mode属性writing-mode:文字排版的方式。区分IE浏览器和非IE浏览器写法(常用): 非IE浏览器,CSS3规范: ①水平方向,从左到右(默认):writing-mode: horizontal-tb;> ②垂直方向,从左到右:writing-mode: vertical-lr; ③垂直方向,从右到左:writing-mode: vert...原创 2020-02-14 14:04:48 · 1491 阅读 · 0 评论 -
百度知道页面的横幅轮播图布局(html+css布局,无轮播效果)
步骤:首先设置全屏背景(position: absolute;和width: 100%; height: 100%;实现全屏);接着定义一个包装div,用来调整该部分在布局中的垂直位置(由于没其他内容,什么header等,我就用margin-top来使其挪动到大概位置)然后再定义一个包裹内容的容器,设宽后设置margin: 0 auto;使其居中;...原创 2020-02-03 14:17:00 · 472 阅读 · 0 评论 -
鼠标经过图片,显示替换/遮盖层
下面附上源码和图片下载地址????????????图片地址:火影忍者超酷系列壁纸放送1080P高清壁纸(由于本地图片不显示,所以我换上了网址链接)下面代码直接复制粘贴即可看效果。<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>鼠标经过图片出现遮盖层</ti...原创 2020-02-02 13:39:45 · 986 阅读 · 1 评论 -
百度知道导航栏菜单练习及思路
<!DOCTYPE HTML><html><head><meta charset="=utf-8" /><title>仿百度菜单练习</title><style type="text/css">/*reset.css*//*去除元素默认css样式,内外边距、默认点、下划线等,设置万能清楚浮动类*/...原创 2020-01-29 18:17:56 · 216 阅读 · 0 评论 -
CSS伪类/伪元素
所有CSS伪类/伪元素 选择器 示例 示例说明 类型 :checked input:checked 选择所有选中的表单元素 :disabled input:disabled 选择所有禁用的表单元素 :empty p:empty 选择所有没有子元素的p元素 :enabled inpu...原创 2020-01-29 15:42:00 · 126 阅读 · 0 评论 -
CSS布局练习——完成效果图
原图链接:https://jingyan.baidu.com/article/e8cdb32b1db1d037042bad61.html第一次练习:使用table+margin敲码测试过程中发现的问题:HTML 去掉table表单里面td之间的间距1.table表单自带的间距,容易影响精度。2.td{ padding:0; nargin: 0;}这个只能消除td的边距,但是整个tab...原创 2020-01-08 23:17:01 · 835 阅读 · 0 评论 -
CSS布局——单/多元素标签的水平、垂直居中、水平垂直居中(常用居中)
行内元素的原创 2020-01-08 15:30:35 · 1127 阅读 · 0 评论 -
文档流定义与脱离文档流的操作
CSS中能够是元素脱离文档流的操作有如下: 1、float 2、position:absolute;绝对定位 3、position:fixed;固定定位 //IE6不兼容文档流的定义:行内元素默认从左到右流,遇到阻碍或者宽度不够自动换行,继续按照从左到右的方式布局。块级元素单独占据一行,并按照从上到下的方式布局(就是默认布局)。 如下图所示: ①块级元素,以各自独占一行...原创 2020-01-06 12:15:54 · 313 阅读 · 0 评论 -
padding与margin的对比测试
本次测试主要在同一种盒子中,分别使用padding和margin来测试两者的区别上面部分是通过添加背景色来观察区别,下面部分是不添加背景颜色,直接通过文本内容观察区别第一步:分别加入padding与margin(两个大盒子只是一个背景父元素,不做padding或margin操作)在box2与test1里加入padding,在box4与test2里加入margin,为了对比,取同值:paddi...原创 2020-01-06 12:36:30 · 808 阅读 · 0 评论 -
盒子模型练习——运用position: relative、absolute、fixed来完成练习(图)
首先明确知道,position属性配合[top+left](向右下移动)、[top+right](向左下移动)、[bottom+left](向右上移动)、[bottom+right](向左上移动)使用。一、利用相对定位position: relative;来完成效果这个方法跟margin类似,不过margin是通过调整外边距,相对于父元素进行位移;而position: relative...原创 2020-01-05 18:40:33 · 883 阅读 · 0 评论 -
CSS布局——单行文字和多行段落的垂直居中
如果盒子里面的内容是图片形式,还可以通过设置padding和margin设置调整位置,但遇到了字体内容后,就会出现瑕疵——数据都对,为何还是无法还原psd设计稿中的盒子模型?首先来看看字体在盒子模型中的宽高padding和margin该怎么写:一行字时:(一般用于制作标题名)这里给设定最后盒子的span.font-test元素的宽是200px,高是100px;通过上图可知,文字内容水平...原创 2020-01-03 19:25:33 · 707 阅读 · 0 评论 -
盒子模型练习——运用padding和margin完成练习(图)
为了方便理解,在这里定义一些值的名称:个人感觉这种复杂盒中盒的练习题更能锻炼自己对padding、margin的运用和理解,方法有很多,我先写写自己的几种方法和思路:这是边做边写的思路与过程效果图:(这里应该做两条虚线的,我以为是双线)思路:(由内及外)✅准备工作:①首先分析一下需要几个盒子:这里我是分了5个盒子,两个有背景色的盒子绿色和粉色,剩下三个都是没背景色,只为了加...原创 2020-01-03 14:03:16 · 1794 阅读 · 0 评论 -
步骤带图详细解释margin、padding、border、content
。原创 2020-01-01 20:16:07 · 1284 阅读 · 0 评论 -
关于CSS样式的继承与非继承属性
CSS中的继承属性和非继承属性(传送门:点击详情)一、无继承性的属性display:规定元素应该生成的框的类型 文本属性 属性 描述 vertical-align 垂直文本对齐 text-decoration 规定添加到文本的装饰 text-shadow 文本阴影效果 whi...原创 2019-12-31 17:48:16 · 414 阅读 · 4 评论 -
如何在代码中进行注释?
html中的注释代码:<!--注释内容-->css中的注释代码:/*注释内容*/js中的注释代码:①单行注释//注释内容;②多行注释/*注释内容*/原创 2019-12-29 22:36:54 · 1670 阅读 · 0 评论 -
CSS中的display属性(含三大常用属性inline、block、inline-block)
关于table制表table表格默认是没边框样式的,添加下列样式来添加边框:table tr td,th{ border:1px solid #000; }(翻译:table标签下的所有tr标签下的所有td和th标签的边样式设置为1像素大,线形是实线,颜色是黑色)border:1px solid #000;是简写,下面是整个语句:/*css*/table tr td,th{ bord...原创 2019-12-29 20:41:28 · 11523 阅读 · 1 评论