![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS/CSS3
背包Boy
朽木也,穷其一生自雕。心已觉累,没有眼泪。
个人博客:http://lawsan.xyz
展开
-
两栏布局和三栏布局
两列布局:左固定、右适应<body> <div class="box"> <div class="aside"></div> <div class="main"></div> </div></body>float + BFC.aside{ float: left; width: 200px; height: 200px; background-co原创 2021-03-22 18:28:46 · 74 阅读 · 0 评论 -
css处理文字过长
文字过长就用... 代替,css代码如下.ellipsis{ display: block;//块状显示 overflow: hidden;//隐藏文字 text-overflow: ellipsis;//显示... white-space: nowrap; //不换行 width:100px;//超过100px就截取}原创 2020-06-29 09:02:06 · 696 阅读 · 0 评论 -
一文带你了解CSS盒模型和BFC
前言在读此文章之后也可以逛逛本人的博客,会持续更新文章的。基本概念所有HTML元素可以看作盒子,在CSS中,box model这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):不同部分的说明:Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。原创 2020-07-23 12:57:12 · 137 阅读 · 0 评论 -
css+js模态框实现
模态框简单实现在学bootsrap时首次接触模态框,觉得模态框非常的神奇。在bootstrap加几个类就可以搞完,模态框;下面来自己做一个吧总体结构:<div class="model-box" > <!--模态框盒子--> <button type="button" class="model-close">×</...原创 2019-03-29 21:12:04 · 871 阅读 · 0 评论 -
CSS实现水平居中和垂直居中
在写网页时经常要做到对齐以及居中等,下面就来浅谈水平居中以及垂直居中。水平居中text-align:center实现行内元素水平居中。margin:0 auto实现块元素水平居中。使用CSS3中新增的transform属性。.parent{ position:relative;.son{ position:absolute; left:50%; ...原创 2019-03-27 23:34:20 · 389 阅读 · 0 评论