![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
山河月色
初学者
展开
-
flex弹性盒子
弹性盒子的基础属性1.声明弹性盒子 声明弹性盒子 display:flex(块flex)/line-flex(行内块flex)你想摆放那些盒子他的父元素就是弹性盒 display:flex 注意一点要给他的父元素加display:flex2.切换主轴方向 flex-direction:row/column/row-reverse/column-reverse row(水平) column(垂直) row-reverse(还是水平方向但是起始端和末尾段颠倒了) column-rev原创 2021-07-22 21:44:34 · 137 阅读 · 0 评论 -
css双飞翼布局
双飞翼布局双飞翼布局和圣杯布局的实现大致相同但是唯一不同的一点是双飞翼布局分别向左移动后不需要在以自身的位置作为参考在把left,right盒子分别移动自身列的宽度只需要给center套一个盒子inner让内容与left,right盒子互不影响即可。<div class="max clearfix"> <div class="center"> <div class="inner"> aosjdoa原创 2021-07-18 16:02:21 · 102 阅读 · 0 评论 -
css圣杯布局
圣杯布局圣杯布局属于三列自适应布局,两侧固定,中间的区域随着内容的大小变化圣杯布局主要是三列自适应布局,主要得实现方式是让center,left,right三个盒子左浮动,然后把left盒子向左移动中间列的宽度也就移动center的宽度,然后在移动right盒子,把right盒子向左移动自身列的宽度,再以自身位置作参考向左移动left盒子,在以自身位置作参考做移动right盒子这样就能实现圣杯布局了。<!-- 三列自适应 左右两侧固定宽度 中间自适应 -->原创 2021-07-18 15:54:56 · 148 阅读 · 0 评论 -
css等高布局
伪等高布局伪等高布局的实现是给盒子一个特别大的下内边距padding-bottom:-99px使内边距充当背景色,然后在同样给一个下外边距margin-bottom:-999px通过下内外边距相互抵消来实现的,内外边距互相抵消但是背景色不变代码如下 <!-- 伪等高 内边距填充背景色 外边距抵消内边距去实现 --> <div class="max clearfix"> <div class="col col1">原创 2021-07-18 10:58:18 · 167 阅读 · 0 评论 -
滑动门技术
滑动门技术滑动门技术的实现主要是通过两个父子标签互相嵌套来实现的例给a标签嵌套了一个span标签 分别给a和span设置其背景图片 其中给a的背景图片让他 放在左顶部 span放在右顶部 通过设置内边距来填充左右的距离通过内容来填充进而实现滑动们的技术代码如下两侧对称滑动门<div class="box"> <div class="list"> <ul class="clearfix"> <!-- li做布原创 2021-07-18 10:34:02 · 753 阅读 · 0 评论 -
文本/font/overflow属性以与盒模型以及元素类与转化
文本属性设置文本的水平对齐方式 text-align: left/right/center/justify(两端对齐)line:height=npx(n为任意数)设置文字垂直居中 行高越大文本向下移动 行高等于盒子的高度时实现文本垂直居中图文对齐 默认:浏览器在解析文字的时候是以基线对齐解析的 而中文没有基线 刚好,图片和文字也是基线对齐---》对不齐 vertical-align:top(顶线)/bottom(底线原创 2021-07-11 10:17:39 · 188 阅读 · 0 评论 -
css属性
css属性引入css的方式 三种方式(行内引入的优先级>内部嵌入>w外部引入) 1.行内引入 写在开始标签里 通过 style="css属性;属性名:属性值;" 特性:只对当前的标签起作用 代码冗杂 结构不清晰 官方样式:结构与样式相分离 2.文件内部嵌入样式表 <head> <style> css代码 </style&原创 2021-07-10 17:19:25 · 51 阅读 · 0 评论