关于静态网页布局
- 网页内部跳转,最好使用span 而不是a标签
- 鼠标滑到按钮时,变成小手模式
cursor:pinter
- textarea取消右小角改变大小:
resize:none/versial/horizontal
- 输入框取消点击 边框变亮
oversize:none
- 同级兄弟元素选择器:
:nth-of-type
伪类选择器,类似:hover,所以不能单独使用,是写在标签后面,起修饰作用
- 同一标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,图片会覆盖颜色。
- 垂直居中的几种方法:
- padding 设置上下一样的边距
- line-height 设置行高line-height与height一样高
- transform 设置transform: translate(-50%, -50%)
- 如果盒子本身没有width/height ,那padding不会撑开盒子大小。注意盒子本身,继承那种不算
- margin 嵌套块元素,垂直外边框塌陷
- 解决方法:
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden
-行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转化为块级和行内块元素就可以了
- 解决方法:
定位
绝对定位的盒子居中
- 加了绝对定位的盒子不能通过<b>margin:0 auto</b>水平居中
- 定位和浮动的特殊特性:
- 1.行内元素添加浮动/绝对或者固定定位后,可以直接设置高度和宽度,类似 行内块元素
- 2.块级元素添加浮动/绝对或者固定定位后,如果不给宽度或者高度,默认大小是内容的大小
- 3.浮动的元素不会压住下面标准流的文字,绝对定位(固定定位)会压住下面标准流所有的内容》》》》》因为浮动产生的目的最初是为了做文字环绕效果。
vertical -align 属性应用
- 使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐
解决图片底部默认空白缝隙问题:
- 1.给图片添加 vertical-align:middle/top/bottom
- 2.把图片转化为块级元素 display:block
溢出的文字省略号显示
1.先强制一行内显示文本
white-space:nowrap;(默认normal自动换行)
2.超出的部分隐藏
overflow:hidden
3.文字用省略号代替超出的部分
text-overflow:ellipsis
多行文本溢出显示省略号
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
- 文字抗锯齿形 让文字显示的更加清晰: -webkit-font-smoonting:antialiased;
2D旋转
- translate对行内元素无效
- 当我们同时有位移和其他属性的时候,记得要将位移放到最前
flex布局
- 当为父盒子设为flex布局后,子元素的float、clear和vertical-align属性将失效
- flex布局中默认是不换行的
- align-items设置侧轴上的子元素排列方式(单行),只有上对齐,下对齐,居中和拉伸(拉伸子元素不用设置height)
- align-content设置侧轴上的子元素的排列方式(多行),单行情况下无效。可以设置上对齐,下对齐居中,拉伸以及平均分剩余空间
项目总结
关于如何制作一个合格的logo
移动端注意点
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
* {
-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {
-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,
a {
-webkit-touch-callout: none;
}
- position:fixed时,如果要居中 margin:0 auto此时就不起作用咯,用left:50%再 transform回来半部分