HTML+CSS 查漏补缺

这篇具有很好参考价值的文章主要介绍了HTML+CSS 查漏补缺。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1,HTML

1,尺寸的百分比

相对于元素参考系(包含块)。

1,普通元素

相对于最近祖先块元素(一般为父元素)的内容区域(width | height)

举例

.box {
	width: 500px;
	height: 300px;
	padding: 50px; /* 没有影响 */
}
.item {
	width: 50%; /* == 500px * .5 = 250px */
	height: 50%; /* == 300px * .5 = 150px */
}
.box {
	width: 500px;
	height: 300px;
	padding: 50px; /* 有影响 */
	box-sizing: border-box;
}
.item {
	width: 50%; /* == 500px * .5 - 50 = 200px */
	height: 50%; /* == 300px * .5 - 50 = 100px */
}

2,绝对(固定)定位元素

相对于祖先元素中,最近的 position 不是 static 的元素的内边距区域((width | height) + padding)

3,常见百分比

常见百分比,除了height 之外,都是相对于 width

css 属性 百分比参考系 备注
height, top, bottom 包含块 height 参考系高度受自身内容变化时,设置无效
width, left, right, padding, margin, border 包含块 width

2,form 表单元素

1,form

具体参考 阻止表单提交

2,button

MDN - button

1,type。默认值 submit。如果 button 在 form 标签内,默认行为会执行提交表单操作。可设置为 button ,让 button 没有默认行为。

2,form。表示关联的 form 元素。值为 form.id,这样让 button 元素不用放在 form 元素内。

3,reset,重置已选(不会重载页面)。

3,label

MDN - label

可以通过 for="id" 来关联,也可以通过 <label> 包裹来关联。

<form>
  <div>
    <label for="basketball">喜欢篮球</label>
    <input type="checkbox" name="basketball" id="basketball" />
  </div>
  <div>
    <label>
      <span>喜欢足球</span>
      <input type="checkbox" name="football" />
    </label>
  </div>
</form>

HTML+CSS 查漏补缺,html,css,html,css,前端,css3,html5

4,outline

外边框。表单元素一般设置 outline: none,再自定义样式。

另外,outline不占用盒子尺寸。有的 UI 设计图的尺寸用的是外边框。所以前端开发对尺寸要求严格时,可以用这个。

5,text-indent

定义一个块元素首行文本内容之前的缩进量。效果和 padding-left 类似。

6,radio

通过 name 来关联唯一性

<input type="radio" name="contact" value="mail" />
<input type="radio" name="contact" value="address" />

3,布尔属性

在 html 标签中只需要写属性名即可,不用写属性值。该属性就是 true。

举例

<select multiple disabled>
  <option selected>123</option>
</select>

<input type="checkbox" checked>

4,contenteditable

contenteditable 表示元素是否可被编辑。富文本编辑器使用该属性实现。

虽然是一个枚举属性,但可以像布尔属性一样,只写属性名默认表示 true。

<div class="box" contenteditable></div>
.box {
  width: 200px;
  height: 200px;
  outline: 1px solid;
  overflow: auto;
  resize: both; /* 可调整尺寸 */
}

效果:

HTML+CSS 查漏补缺,html,css,html,css,前端,css3,html5

5,em 单位

font-size 中使用是相对于父元素的字体大小,在其他属性(比如 width)中使用是相对于自身的字体大小。

2,CSS

1,透明度颜色样式值

下面3种写法效果相同

div {
  color: rgba(0, 0, 0, 0.5);
  color: rgb(0 0 0 / 50%);
  color: #00000080;
}

2,resize

resize

一般用于控制 <textarea> 是否可以调整尺寸。resize: none 禁止调整。

1,但也能够单独控制一个方向的尺寸变化 vertical horizontal both

2,也能控制其他元素。但不适用下列元素:

  • 内联元素
  • overflow 属性设置为 visible 的块元素

举例:

<div class="box"></div>
.box {
  outline: 1px solid;
  width: 200px;
  height: 200px;
  overflow: auto;
  resize: both;
}

效果:

HTML+CSS 查漏补缺,html,css,html,css,前端,css3,html5

3,浮动

float 导致父级高度坍塌。
解决:

  • 父级 overflow: hidden 形成BFC
  • 父级增加子元素设置清除浮动 clear:both

一般会设置为通用类

clearfix::after {
  content: '';
  display: block;
  clear: both;
}

4,vertical-align

vertical-align

只对inline inline-block table-cell元素生效。用于控制垂直方向的对齐。

属性值可以是具体数值

<div>
  <input type="checkbox">
  <span style="font-size: 14px;">这是value</span>
</div>

下面2种方式都可以对齐,具体情况微调即可。

input {
  vertical-align: -2px;
}
/* 或 */
span {
  vertical-align: 2px;
}

5,兄弟选择器

CSS组合选择器

/*  一般兄弟组合器,匹配同一父元素下,p 元素后的所有 span 元素。 */
p ~ span {}

/*  紧邻兄弟组合器,紧邻 p 元素的第一个 span 元素 */
p + span {}

6,伪类选择器

1,nth-child,所有元素都参与计数,再找指定的元素。

<div>
  <span>span1</span>
  <p>p1</p>
  <span>span2</span>
  <span>span3</span>
</div>
span:nth-child(-n + 3) {
  color: red;
}

span:nth-child(2n + 1) {
  color: red;
}

上面2种展示效果一样。

HTML+CSS 查漏补缺,html,css,html,css,前端,css3,html5

2,nth-of-type,先确定元素的类型,然后在相同类型的元素中计数。

<div>
  <div>div1</div>
  <p>p1</p>
  <p>p2</p>
  <div>div2</div>
  <p>p3</p>
  <p>p4</p>
</div>
p:nth-of-type(2n + 1) {
  color: red;
}

效果

HTML+CSS 查漏补缺,html,css,html,css,前端,css3,html5

7,精灵图(雪碧图)使用

sprite

降低图片请求次数,提升浏览器加载效率。

通过 background-position 来确定目标图片位置。

div {
  width: 30px;
  height: 30px;
  background: url() no-repeat -100px -100px;
  /* 简写用的下面的属性 */
  /* background-position: -100px -100px; */
}

8,定位

1,一个占满全屏的蒙层。

/* 百分比相对视口 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

,2,绝对定位实现垂直水平居中,居中元素必须有宽高。left top 的百分比,相对于参考系(参考最上面的尺寸百分比)。

3,全屏弹窗 dialog 打开时,通过设置 body { overflow: hidden} 来阻止页面滚动。

4,绝对定位和浮动元素,display: block 并无法更改。


以上,待续。文章来源地址https://www.toymoban.com/news/detail-674347.html

到了这里,关于HTML+CSS 查漏补缺的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包