HTML+CSS踩坑记录

标签

body

body默认有8px的外边距

a标签

javascript:; 不会导致点击a造成页面刷新
若herf为空，则点击a会刷新当前页面

button标签

button.disabled = true; // 禁用按钮

img标签

img 标签是行内块元素
注意：默认地，img是没有边框的（除非图像在 a 标签内部）。

        img {
            /* 图片没有边框，去掉图片底册的空白缝隙 */
            border: 0;
            vertical-align: middle;//图像和父元素的中线对齐
        }

p标签

p标签是块级元素，默认宽度占满一行。HTML

是段落标签，除了可以添加文字内容外，完全可以添加其他html标签也包括IMG图片标签。

行内块元素之间有空隙

input和button都属于行内块元素，如果放在一个盒子之间，不能刚好放入，行
内块元素之间有空隙，可以通过添加浮动消除空隙

表单标签

提交，会刷新页面，需要组织表单默认行为

浮动对行内元素的影响

任何元素都可以添加浮动，浮动的元素具有行内块元素的特性

定位对行内元素的影响

相对定位不会对行内元素产生影响
绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开。

:hover

.dropdown .dd ul li:hover a {
color: #b1191a;
}
选中li时 a变色

巧妙运用浮动元素不会压住文字的特性

.mod_service ul li h5 {
    float: left;
    width: 50px;
    height: 50px;
    background-color: purple;
}

行内元素注意点

行内元素内不可以放块级元素，
特殊情况标签a里面可以放块级元素，但是给a转换一下块级模式最安全
经常在a内放img标签，来实现点击图片跳转

伪元素选择器

:nth-child(n+3) 从第3个元素往后开始选
:nth-child(-n+3) 从第3个元素往后开始选

属性选择器

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

tab栏切换对html布局的要求

原理：点击选项卡显示对应的tab栏，其余的tab栏隐藏

自定义标签属性

通常用来传值或用于图片懒加载等方面
格式：data-自定义属性名

<img data-src="图片名" alt="提示文本"/> //dara-src就是自定义属性
<p data-id="1">1</p>   //data-id就是自定义标签属性
<p data-id="2">2</p>  //通过每个p标签的data-id属性（通过这个属性值，判断点击的是那个p）
<p data-id="3">3</p>  

使用scale()改变元素尺寸，将会改变这个元素内所有属性的尺寸

css的vh单位和vw单位

vh和vw不同于宽度或高度的百分比，若height:100%则是需要用父元素做参考，vh和vw相对于视图，更推荐
参考

background

background-size:设置背景图片的大小
background-position 设置背景图片的位置

CSS 属性 translate 允许你单独声明平移变换，并独立于 transform 属性