![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 54
前端小99
一点一滴 不忘初心
心有猛虎 细嗅蔷薇
展开
-
常用pc端 实现左边100px固定,右边自适应
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(mainsize)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。可以用flex布局实现这个效果,用到的flex方法有flex-basis,flex-shrink,flex-grow。flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。......原创 2022-07-21 10:56:12 · 415 阅读 · 0 评论 -
Vue在父组件中改变子组件内的某个样式
<template> <div class="cont"> <footEr></footEr> </div></template><script> import footEr from '../../components/foot.vue' components: {footEr}</script> <style scoped>.原创 2021-06-09 11:41:33 · 933 阅读 · 0 评论 -
PC端页面各种状态下的布局
PC端常见的布局技术:一:水平居中1:margin:0 auto ; 自动居中.text{ width: 200px; margin: 0 auto;}优点:兼容性好缺点: 需要指定宽度2:使用inline-block 和 text-align实现.parent{text-align: center;}.child{display: inline-block;}优点:兼容性好;不足:需要同时设置子元素和父元素3:使用table实现.child{.原创 2021-04-29 09:43:15 · 1498 阅读 · 0 评论 -
固比固模型用与垂直居中pc端页面书写
* { padding: 0; margin: 0; } ul, ol { list-style: none; } a { text-decoration: none; color: #000; } .box { width: 100%; overflow: hidden; } .box p { float: left; height: 20...原创 2019-03-21 20:35:11 · 245 阅读 · 0 评论 -
响应式布局 内减盒模型 媒体查询 嵌入式布局
百分比布局:标准流和浮动:1width,padding,margin父盒子内容宽比值2 height父盒子内容高的比值3 border不能使用百分数 内减盒模型 盒子设置width,height,再设置padding,border盒子的占有区域变大,内容区域不变。这种称为外扩盒模型css3增加的属性,内减盒模型盒子设置width,height,再设置p...原创 2019-03-21 21:03:00 · 269 阅读 · 0 评论 -
css3动画keyframes css常用布局
keyframes 有兼容性 -webkit- -moz- -0- -ms-要定义属性名称 名称结合过渡一起使用 过渡完成时间(S) 缓冲描述 (linear 匀速 ease非匀速 ) 延迟时间;(如果是0秒也必须设置单位)动画次数 infinite补全反方向动画 alternate保存最后一帧的状态 fo...原创 2019-03-16 21:40:22 · 1047 阅读 · 0 评论 -
css定位新增粘性属性ticky 以及其他的定位
1:static(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性 2:relative 相对于默认位置(即static时的位置)进行偏移,元素并不脱离文档流原本的位置会被保留,其他的元素位置不会受到影响 。 3: absolute表示,...原创 2020-08-20 14:48:15 · 256 阅读 · 0 评论 -
清除浮动的8中方法
1:给父级定义height 高度固定的布局 2:外墙法 结尾处加空div标签 clear:both(不推荐) 缺点:过于添加多余的div 3:父级div定义 伪类:after 和 zoom(推荐)<style type="text/css"> .div1{ background:#000080; border:1px solid red;} .div2{ background:#800080; border:...原创 2020-08-20 13:16:49 · 187 阅读 · 0 评论 -
行内元素与块级元素与行内块元素
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度块级元素可以设置width,height属性.块级元素即使设置了宽度,仍然是独占一行.块级元素可以设置margin和padding属性.块级元素对应于display:block.------------------------------------------------------------------------------------------行内元素不会独占一行,相邻的行内元素会排列在同一行里..原创 2020-08-19 19:35:10 · 333 阅读 · 0 评论 -
盒子模型标准模式与怪异模式内减盒模型
盒子模型-怪异模式和标准模式 首先,两种模式可以利用box-sizing属性进行自行选择: 标准模式:box-sizing:content-box; 用户设置的宽度和高度是相对稳定的,增加border、padding会使整个盒子变大 怪异模式:box-sizing:border-box; 为内减模式,盒子的实际宽度和高度是固定不变的,用户已经设置好的width和height。 增加border和padding的值,不会改变 盒子的大小,只改变内容区域的大...原创 2020-08-19 18:48:51 · 399 阅读 · 0 评论 -
css居中的8种方法
纯CSS实现垂直居中的几种方法 垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。方法1:table-cellhtml结构: 1 2 3 <div class="box box1"> <span>垂直居中</span> </div> ...原创 2020-08-19 16:53:44 · 8471 阅读 · 0 评论 -
CSS轮廓outline
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。 border:1px solid red; outline-style:dotted; outline-color:#00ff00;<!DOCTYPE html><html><head><met...原创 2018-04-08 14:45:56 · 352 阅读 · 0 评论 -
css中Display(显示) 与 Visibility(可见性)的使用方法
隐藏元素 - display:none或visibility:hiddendisplay属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏...原创 2018-03-27 09:53:30 · 4937 阅读 · 0 评论 -
CSS visibility 属性
属性定义及使用说明visibility属性指定一个元素是否是可见的。提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。默认值:visible继承:yes版本:CSS2JavaScript 语法:object.style.vi原创 2018-04-18 14:03:45 · 3163 阅读 · 0 评论 -
CSS 提示工具(Tooltip)
基础提示框(Tooltip)实例解析HTML) 使用容器元素 (like ) 并添加 "tooltip" 类。在鼠标移动到 上时显示提示信息。提示文本放在内联元素上(如 ) 并使用class="tooltiptext"。CSS)tooltip 类使用 position:relative, 提示文本需要设置定位值 position:abs原创 2018-04-18 15:31:00 · 1283 阅读 · 0 评论