css布局
小小飞肖
no pain,no gain
展开
-
css实现左侧定宽右侧自适应布局
方式一,利用浮动+margin<style> .left{ background: red; float: left; width: 200px; height: 100px; margin-right: 20px; } .right{ backgr...原创 2019-06-27 08:56:22 · 413 阅读 · 0 评论 -
css清除浮动的几种方法
清楚浮动的原理:1.浮动元素的特点以及对父元素和自身的影响 ;2.造成高度塌陷的原因以及解决办法;首先,什么是浮动?浮动元素是脱离文档流的,但不脱离文本流,这是什么意思呢,用过 word 的应该知道有一种图片环绕的方式是文字环绕吧,就是这种效果。那么它有什么特点呢对自身的影响 : float 元素可以形成块,如 span 元素。可以让行内元素也拥有宽和高,因为块级元...原创 2019-07-03 14:32:17 · 163 阅读 · 0 评论 -
css中上下左右居中方法大全
<style> /* 方法一 * 通过定位来实现/ /* .content{ height: 300px; background: #0f0; position: relative; } .conDetail{ background: red; position: absolute; left: 50%; ...原创 2019-07-03 15:34:21 · 5489 阅读 · 0 评论 -
经典三列布局两侧定宽中间自适应
方式一:利用flex布局 <style> .all{display: flex;} .div1{width: 200px;background-color: #f00;height:300px;font-size:20px} .div2{flex:1;background-color: #0f0;height:300px;font-size...原创 2018-01-17 14:49:02 · 290 阅读 · 0 评论 -
css文本溢出换行问题
单行溢出省略多行溢出省略原创 2019-08-28 11:34:03 · 324 阅读 · 0 评论 -
bfc详解
BFC与多列布局定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。规则1:内部的box一行一行排列2:属于同一个BFC的两个box在垂直方向的margin会发生重叠3:每个元素的margin ...原创 2019-09-03 10:52:44 · 553 阅读 · 0 评论 -
css绘制自适应三角形 矩形一个div里面最多可以绘制几个圆
一 .三角形绘制样式如下:<style> .triple { width: 0px; height: 0px; border-top:100px solid transparent; border-left: 100px solid transparent; border-bot...原创 2019-09-11 15:24:48 · 624 阅读 · 0 评论 -
ie盒模型与标准盒模型下的设置颜色区域的宽度
<style> .boxSty{ width: 100px; height: 100px; padding: 10px; background: red; } </style> <div class="boxSty"> 6666666666 <...原创 2019-09-19 07:58:47 · 282 阅读 · 0 评论 -
css margin引起的塌陷
一、同级元素引起的塌陷解决方案一:给相应的盒子外包裹一个盒子,设置属性overflow:hidden解决方案二:因为发生margin合并问题,采取两者中的最大值进行显示,可以设置一个值取那两者的和<!DOCTYPE html><html><head><title>同级元素margin塌陷</title><met...原创 2019-09-22 10:36:31 · 133 阅读 · 0 评论