![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
杨九日
拒绝CV,动脑动手!
展开
-
一次学会使用flex
flex属性介绍父元素设置display:flex;会在父元素容器内形成两根轴:水平的水平轴、垂直的交叉轴,默认按照主轴排列这几个属性是设置在父元素上用来控制子元素如何显示的。flex-direction: row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。flex-wrap: nowrap(默认)原创 2020-06-27 00:10:21 · 160 阅读 · 0 评论 -
面试题之css选择器优先级
css优先级规则CSS 优先规则1: 最近的祖先样式比其他祖先样式优先级高。CSS 优先规则2:"直接样式"比"祖先样式"优先级高。CSS 优先规则3: 优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器CSS 优先规则4: 计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大原创 2020-06-16 11:22:55 · 943 阅读 · 0 评论 -
面试题之实现上下固定、中间自适应的布局---三种实现
文章目录利用绝对定位+margin利用flex和三栏布局不一样,float没有上下浮动,所以不能利用float进行布局;像是圣杯布局,双飞翼布局都是利用浮动+margin ,所以上下三栏布局方法就相应的少了一些。像是圣杯、双飞翼布局可参考一次搞定面试常问的三栏布局–五种实现利用绝对定位+margin <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me原创 2020-06-13 21:19:34 · 453 阅读 · 2 评论 -
面试常问的 border实现三角形&使一个矩形水平垂直居中并设定宽高比
实现一个矩形,居中,宽高2:1复习position:static:默认的布局;即元素在正常文档流的位置。relative:相对定位;不脱离文档流,移动参照点是定位前的位置。absolute:绝对定位;脱离文档流,参照点是最近的非static的祖先元素。fixed:绝对定位;脱离文档流,参照点是屏幕视口。sticky:粘性定位;不脱离文档流,参照点是最近的滚动父元素。具体效果请查看MDN.box{ position: absolute; to原创 2020-06-12 09:49:06 · 267 阅读 · 0 评论 -
一次搞定面试常问的三栏布局--六种实现
实现左栏宽100px,右栏200px,中间自适应,高度100%利用浮动+margin左边左浮动,右边有浮动,中间设置高度宽度100%,然后,设置margin空出左右位置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2020-06-11 16:11:48 · 239 阅读 · 1 评论 -
任意大小图片的左右半区布局实例 中 给附在图片上的超链接加颜色等属性,为何不会被图片覆盖?
问题:超链接是如何作用在图片上的,为何没有被图片给覆盖?又没有这样引用<a href=""><img src=""/></a>此代码是css世界中关于 任意大小图片的左右半区布局的实例。代码代码:<style type="text/css"> .box { display: inline-block;/*作用就是行内编辑,耶耶耶...原创 2019-07-15 15:13:44 · 148 阅读 · 0 评论 -
steps函数--参数意思和用法
图片解释如下,参数意思和用法在代码的注释中所引用图片共7帧,如下:尺寸为200*1400,所以设置div为200*200,分为7帧,除去展示帧,需六次步骤跳转,原图如下:代码:参数如果是start,就是在开始的时候改变,如果是end,就是在结束的时候改变.<!DOCTYPE html><html lang="en"><head> <...原创 2019-07-30 17:11:18 · 4528 阅读 · 0 评论 -
css之button过渡
点击效果:点击后会将下部阴影给遮挡代码+注释:/*transition 属性设置元素当过渡效果,四个简写属性为: transition-property 指定CSS属性的name,transition效果 transition-duration transition效果需要指定多少秒或 毫秒才能完成 transition-timing-function 指定transitio...原创 2019-07-29 21:08:30 · 788 阅读 · 0 评论 -
css动画之平移旋转变换
平移旋转:将序列编号进行变换<!DOCTYPE html><html><head> <title>动画</title> <style type="text/css"> /*将下列序列编号进行平移旋转*/ .rules{ list-style: none; counter-reset: rule...原创 2019-07-28 20:35:46 · 797 阅读 · 0 评论 -
替换元素、非替换元素与content
替换元素之所以为替换,就是因为其内容可替换,而这个内容就是 margin、border、 padding 和 content 这 4 个子中的 content box,对应的 CSS 属性是 content,所以,从 理论层面讲,content 属性定了是替换 还是 非替换。 理论太虚,我们还是看一些有趣的真实例。在开始之前,我们需要感 Chrome 器,Chrome 器的表 现帮助我们更好地理解了替换。什么表现呢?就是在 Chrome 器下,所有的都持 content属性原创 2019-07-17 20:35:39 · 214 阅读 · 0 评论 -
利用盒子的首选最小宽度 来构建图形
将盒子的display属性设为inline-block,因为设为inline-block使其具有收缩与包裹性,可以使盒子宽度随着内部元素大小而变大变小,当然,首先将盒子width写为0;利用伪选择器来向盒子内添加元素,盒子内规则:东亚文字(如汉字)最小宽度为每个汉字的宽度,而西方字符,连续的英文字符显示,但终止与空格或其他非英文字符。代码如下:<style type="text/css"...原创 2019-07-14 14:16:41 · 211 阅读 · 0 评论 -
关于浮动依照relative父元素的基线是什么?
关于左右浮动依照relative父元素的基线是什么?是父元素的content,还是border?我的right_span标签让它靠右,但必须要设置right:5px;效果如下:要是设置right:0px;就会顶到border。再者:为什么我的left_span设置为left:0px;,它却紧贴着content内容呢?<!doctype html><html>...原创 2019-09-27 19:25:47 · 195 阅读 · 0 评论 -
跑马灯---js组件 可自设参数
运用JavaScript的DOM实现纯js的跑马灯的效果。以下是跑马灯可设的参数:content是广告内容y是距离顶部的位置background是背景颜色color是字体颜色size:修改字体大小height是广告高度代码如下:<script> var test1 = function (content,y,height,size,color,backgrou...原创 2019-08-04 19:51:58 · 611 阅读 · 0 评论