inline-block的间隙问题 box-orient属性 line-clamp属性 margin问题
只要设了 display:inline-block 将元素变成行级块元素的时候,会自带空隙,即使你设了 margin 和 padding 依然没有效果!
解决办法:只要在父元素上加上font-size:0 就好了,
-webkit-box-orient: 水平排列 或 垂直排列 (在子元素上进行操作)(前提:父元素为弹性父级 , 使用时加前缀);
属性值:horizontal 从左到右水平排列;
vertical 从上到下垂直排列;
-webkit-line-clamp:是一个不规范的属性 ,还不在css的草案中 :显示块级元素显示的文本行数;(使用时加前缀)
属性值:数字
父元素设margin,第一个子元素margin-top不起作用?
原因:可能把第一个子元素当成相邻的元素 从而产生margin塌陷;
解决:改变子元素性质为行级块元素
inline-block的间隙问题 box-orient属性 line-clamp属性 margin问题的更多相关文章
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- css属性(常用属性整理)
摘要:本文是我在学习前端的过程中整理的一些常用css属性,部分是css3新增的,因能力有限,文中如有错误,欢迎提出,我会及时修改.希望对大家有帮助! CSS属性 CSS属性 1 1. css颜色属性 ...
- CSS属性:定位属性(图文详解)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...
- css 08-CSS属性:定位属性
08-CSS属性:定位属性 CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. position: absolute; <!-- 绝对定位 --> position: relat ...
- HTML 标准属性 和 事件属性
HTML的公共属性 HTML 和 XHTML 标签支持的标准属性 核心属性 (Core Attributes) 以下标签不提供下面的属性:base.head.html.meta.param.scrip ...
- CSS3 box-flex属性和box-orient属性
比较有意思的是虽然目前没有浏览器支持box-flex,box-orient属性,但CSS3问世以来,这两个属性却一直很火.2014年阿里校招第5题要求使用CSS3中的功能实现三个矩形的布局,总的宽度为 ...
随机推荐
- vue组件通信之父子组件通信
准备工作: 首先,新建一个项目,如果这里有不会的同学,可以参考我转载过的文章 http://www.cnblogs.com/Sky-Ice/p/8875958.html vue 脚手架安装及新建项目 ...
- react 之 flux
[WangQi]---flux---[react] 一.什么是Flux Flux 是一种架构思想,专门解决软件的结构问题.它跟MVC 架构是同一类东西,但是更加简单和清晰. 二.flux的基本概念 ...
- MySQL-第十篇多表连接查询
1.SQL92规范.SQL99规范 2.广义笛卡尔积,多表之间没有任何连接条件,得到的结果将是N x M条记录. 3.SQL92中的左外连接.右外连接,连接符有(+或*),放在连接条件那一边就叫做左或 ...
- Linux安装Python3以及虚拟环境
python3的linux环境编译安装 1.linux下安装软件的方式 选则yum工具,方便,自行解决软件之间的依赖关系,自动下载且安装 1.配置yum源 可以选择阿里云源,清华源等 配置第一个仓库, ...
- mysql-介绍、下载安装以及软件基本管理
一.mysql介绍 mysql是一个关系型数据库管理系统,它是一个基于socket编写的C/S架构的软件. 客户端软件: mysql自带:如mysql命令,mysqldump命令等. python模块 ...
- 说说 HTTP 和 HTTPS 区别??
HTTP 协议传输的数据都是未加密的,也就是明文的,因此使用 HTTP 协议传输隐私信息非常不安全,为了保证这些隐私数据能加密传输,于是网景公司设计了 SSL(Secure Sockets Layer ...
- 判断当前终端是手机还是pc端并进行不同的页面跳转
判断当前设备(终端)是手机还是pc端并进行不同的页面跳转 DEMO 1 <script type="text/javascript"> function browser ...
- ASE Backend Alpha Sprint Review
[Backend] Alpha Review展示博客 团队成员介绍:仅限于Alpha阶段有贡献的成员. 典型场景描述:描述并说明你们认为的产品面向的典型场景. 团队管理与协作:包括但不限于团队内部如何 ...
- Codeforces Round #425 (Div. 2) - D
题目链接:http://codeforces.com/contest/832/problem/D 题意:给定一棵n个点的树,然后给你q个询问,每个询问为三元组(a,b,c),问你从这三个点中选取一个作 ...
- 04机器学习实战之朴素贝叶斯scikit-learn实现
In [8]: import numpy as np import matplotlib.pyplot as plt import matplotlib as mpl from sklearn.pre ...