基础记录

最新推荐文章于 2024-11-12 14:31:18 发布

原创最新推荐文章于 2024-11-12 14:31:18 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS #JS

基础专栏收录该内容

1 篇文章

订阅专栏

本文介绍了前端开发中的多项实用技巧，包括HTML与CSS的高级用法，如禁用滚动条、表单提交设置、移动端适配及CSS3特性详解。同时探讨了定位、过渡和变形等效果实现方法。

HTML

1.禁止显示滚动条

html,body{
    height: 100%;
    overflow: hidden;
}

2.表单提交

表单中的默认选中加：checked=“checked”

label：专门用来选中表单中的提示文字

输入框input：text，postword，checkBox，radio，submit（提交），reset（重置），button

下拉列表select：(name属性要指定给select，而value属性要指定给option)

文本域textarea：name=“info”

<select>
	<option>1</option>
    <option>2</option>
    <option>3</option>
</select>

url地址?查询字符串

格式：

属性名=属性值&属性名=属性值

表单想要提交到服务器必须要指定 name
单选框还要必须指定 value

移动端

1.HTML中要添加的标签：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

CSS3（Cascading style sheets）

全称：Cascading style sheets

1.浏览器渲染样式的顺序

从右往左

2.自定义字体

@font-face

3.文本新增样式

1.文本阴影

text-shadow: 颜色 10px 10px（偏移量） 10px（模糊程度）;

2.文字溢出显示 …

// 必须是可以指定宽高的元素
div{
    width: 200px;
    border: 1px solid;
    
    white-space: nowarp;	// 不让文字默认换行
    overflow: hidden;	// 超出隐藏
    text-overflow: ellipsis; // 超出显示...
}

4.盒模型新增样式

1.盒模型阴影

box-shadow:inset（内阴影） 颜色 10px 10px（偏移量）10px（阴影大小） 10px（模糊程度）, 再写一次，可以叠加;

2.倒影

-webkit-box-reflect: left 10px;

3.box-sizing

content-box为默认属性，即标准盒子模型

border-box此属性会让盒子的内容区和padding区合到一起，从而添加padding不会变大

box-sizing: border-box;

4.盒子垂直居中

// 方案1：
#test{
    position: absolate;
    left: 0;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px; //此方法必须指定宽高
}
// 方案2：
div{
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
}

5.新增UI样式

1.圆角

border-radius

2.边框图片

3.背景

background-color
background-image（支持多长背景图片）
background-repeat: no-repeat;（不平铺）
background-position

6.动画

1.过渡

transition
transition-property（应用过渡的属性名称）width，height，font，all（默认值all）
transition-duration（以秒或毫秒指定过渡动画的时间）默认值0s
transition-timing-function
	属性值：  1. ease：加速然后减速，默认值
		  	2.linear：匀速
			3.ease-in：加速
			4.ease-out：减速
			5.ease-in-out：加速然后减速
			6.cubic-bezier：贝塞尔曲线
			7.step-start
			  step-end
			  steps
transition-delay（延迟）默认值0s

2. 2D变形（transform）

只在块级元素中有效

transform：
	rotate(120deg) 旋转
	translate X/Y 平移
	skew(120deg) 倾斜
	scale 缩放
	transform-origin 基点的变换

7.css中可以继承的属性

字体系列属性

font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
文本系列属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
元素可见性

visibility：控制元素显示隐藏
列表布局属性

list-style：列表风格，包括list-style-type、list-style-image等
光标属性

cursor：光标显示为何种形态

8.css中可继承和不可继承的属性

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse。

9.定位position的值：

值	描述
absolute	生成绝对定位的元素，相对于static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。（会脱离文档流）会使元素提升一个层次。内联元素变成块元素，块元素的宽高默认都被内容撑开
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。（不会脱离文档流）会使元素提升一个层次
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值，