变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样]#test { transform: translate(平移) / scale(缩放) / rotate(旋转) / skew(倾斜);//用空格隔开即可,其取值如下图所示.其中translate如果取百分比,是相对于元素自身的长宽的百分比,若取长度则类似于33px. transform-origin: 指定变换的起点,具体取值见表23-7 } 自…
cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面,如下所示: 那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮. 我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题. 但是这可能会引发另一个经典的 baseline 对齐问题,也就是本文要讨论的主要问题. 1. 问题现象…
父级元素: letter-spacing: -0.5em;font-size: 0; 子级元素: letter-spacing: normal; display: inline-block; vertical-align: top; 即可解决. 问题剖析: 以input元素为例子:因为input元素是行内块元素,所以它所在的行会形成一个行框.然后行框的高度是和line-height属性相关的,line-height的说明如下: On a block container element whose…
块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建. 1)块级标签特点 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行(独自占据一整行或多整行) 2.元素的高度.宽度.行高以及顶和底边距都可设置. 3.宽度缺省是它的容器的100%,除非设定一个宽度. 4.它可以容纳行内标签和其他块级标签. 注意 只有文…
显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模式有点的显示模式: 行内块元素:结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示: 行内标签:包含a.span.em.strong.b.i.u.label.br: 特点:可以多个标签存在一行,不能直接设置行内标签的高度.宽度.行高以及顶…
块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模式有点的显示模式: 行内块元素:结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示: 行内标签:包含a.span.em.strong.b.i.u.label.br: 特点:可以多个标签存在一行,不能直接设置行内标签的高度.宽度.行高以及顶和底边距,完全靠内容撑开宽高! a标…
1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小/行高 字体样式 字体大小和样式不可省略 2 行内块的间距问题 行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动 给父盒子设置一个高度     Clear: both      Overflow…
①当对行内元素使用padding时,只有左右方向(正常)有效:竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响. ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果. ③background-color的范围:这种颜色会填充元素的内容.内边距和边框区域,扩展到元素边框的外边界(但不包括外边距).如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色.…
这个是在面试的时候,面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) 比如你对一个a标签设置它的高度是没有效果的 2)HTML元素分为替换元素和非替换元素 替换元素指的是作为其他的元素占位符的一个元素 例如img   非替换元素指内容包含在文档中的元素  <p>hahaha</p>这个p就是一个非替换元素 区分替换与非替换的方法:替换元素浏览器会根据标…
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 a LoVe HAte 必须要 遵循这个准则 “爱恨准则” nth-child(3n+1) first-child last-child 继承性和层叠性 继承性: 文本的属性: color text-*,line-*,font-* 盒子属性 定位布局的元素 层叠性: 1.先看标签元素有没有被选中,如果选中…