![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
子月吾生
one day by one day
展开
-
css实现标签固定悬浮在某个位置(position:fixed)
关键用到的就是固定定位(position:fixed)和层叠属性(z-index)<div class="fix-box"></div><style> .fix-box{ text-align: center; top:35px; position:fixed; z-index:100; }</style>知识点详细解析position:fixed:盒子将脱离原来的文本流,进入到新原创 2020-08-12 17:58:40 · 12845 阅读 · 0 评论 -
position属性详解(static|relative|absolute|fixed|sticky)
一、staic——自然定位/常规定位/静态定位把它叫做定位中的一股清流,回归本真1、作用:是元素定位于常规/自然流中,即块、行垂直排列下去,行内元素水平从左到右2、特点:会忽略掉top、left、right、bottom或者z-index声明首先写如下样式:一个父容器里面右三个块<div class="container"> <div class="box...原创 2019-07-22 20:01:10 · 627 阅读 · 0 评论 -
css定位机制原理详解(标准流&定位&浮动)
一、css定位机制1、分为普通流(标准流),浮动、绝对定位(1)普通流:默认状态是元素从左往右。从上往下的排列,也就是说标准流中元素的位置是由它在HTML中的位置决定的块级元素特性:块级元素大多为结构性标记独占一行可以设置宽高如果不设置宽高,宽度默认为容器的100%块级元素有div,p,h1~h6,ul,ol,li,dl(定义列表),dt,dd,table,form,hr(水平分...原创 2019-07-22 14:08:46 · 1892 阅读 · 0 评论 -
CSS可继承属性详解
继承就是指子节点默认使用父节点的样式属性。可以这样记忆:只有颜色,文字,字体间距行高对齐方式,和列表的样式可以继承一、可继承属性有如下分类:1、字体系列属性font:组合字体font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格font-variant:设置小型大写字母的字体显示文本,...原创 2019-06-02 23:41:15 · 552 阅读 · 0 评论 -
面试之BFC布局||圣杯布局||双飞翼布局
一、BFC布局BFC,即Block Formatting Contexts(块级格式化上下文),具有BFC特性的元素可以看做是隔离了的独立容器,容器里面的元素不会再布局上影响到外面的元素,并且BFC具有普通容器所没有的一些特性。1、BFC 布局规则内部的Box会在垂直方向,一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠...原创 2019-06-02 19:05:19 · 508 阅读 · 0 评论 -
前端面试之轻松实现CSS两栏布局的几种方式(实践有效)
这里实现得两栏布局是左边部分的宽度固定,右边部分的宽度自适应其效果就如下图,在浏览器屏幕大小变化的过程中,左边块的大小是不变的,右边块的宽度是自适应的。实现方法有以下几种:1通过设置浮动实现。需要两个div实现,一个div设置浮动,并设置宽度,另一个div不用设置任何东西如果要给右边块设置什么的话下面两种方法也行:(left左浮动并设置宽度right设置margin-left为lef...原创 2019-06-12 22:12:23 · 1442 阅读 · 0 评论 -
常用的CSS标签(前端面试)
一、字体——font1)大小|font-size: x-large;(特大) xx-small;(极小) 单位:PX、PD2)样式 |font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)3) 行高|line-height: normal;(正常) 单位:PX、PD、EM4) 粗细 |font-weight: bold;(粗体) lighter;...原创 2019-04-17 17:55:25 · 173 阅读 · 0 评论 -
下拉菜单滑动效果(animation实践)
==思路:==通过给父元素设定固定的宽度和高度以及设置overflow:hidden属性将超出的ul li列表隐藏掉。视觉上看到的上下滑动的其实是父元素的高度,而不是ul li列表,列表并没有动过。但视觉上感觉到的就是ul li列表在上下滑动。完整代码如下: <title>下拉菜单滑动效果</title> <style> *{ ...原创 2019-04-22 13:44:26 · 1297 阅读 · 0 评论 -
前端开发中的几大布局的详细总结
一,静态布局(Static Layout)在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分; 意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置二,弹性布局(Elastc Layout)是CSS3引入的布局方式,其中flex-flow是flex-direction和flex-wrap属性的简写方式,语法如下:flex-flow:< flex-direct...原创 2018-11-28 19:50:30 · 3133 阅读 · 0 评论 -
background-positoin详解
如何使用背景图片位置 .block { margin: 0 auto; border: 5px solid yellow; width: 600px; height: 600px; background:no-repeat url(./img/demo1.jpg); ...原创 2018-09-27 12:45:56 · 266 阅读 · 0 评论