html,css基础(3)~长度单位，元素阴影，表单元素，响应式布局

目录

• • • 1.长度单位
    • 2.行内垂直居中
    • 3.元素阴影和文本阴影
    • 4.表单元素
    • 5.响应式布局
    
    
  
  

1.长度单位

(1)Px：像素，1px相当于屏幕上1个最小的显示单元。
(2)Em表示当前元素的父元素的字体大小。
(3)Rem表示根元素的字体大小。
(4)1vw表示浏览器窗口宽度的1%。
(5)1vh表示浏览器窗口高度的1%。

2.行内垂直居中

vertical-align: middle;


3.元素阴影和文本阴影

Box-shadow：设置元素阴影，五个参数：
横向偏移量，
纵向偏移量，
模糊程度，
阴影大小，
阴影颜色。


box-shadow: 10px 10px 20px 0px grey;


Text-shadow：设置文本阴影，四个参数：
横向偏移量，
纵向偏移量，
模糊程度，
阴影大小，


text-shadow: 2px 2px 5px black;


4.表单元素

Input：输入框，行内块元素。placeholder：提示内容。

Button：按钮，行内块元素。

按钮


Lable标签：用于关联一个其他的表单元素，for属性需要写关联元素的id，点击lable相当于点击了关联的元素。

密码:


Radio:单选框，处在同一组的单选框只能选一个值。


上海

深圳

郑州



Chechbox：复选框，可以多选。

白菜

苹果

西瓜



Select：下拉列表，行内块。
Option：下拉列表项。


小明
小红
小刚



5.响应式布局

定义：页面本身能够根据浏览器窗口的宽度进行不同的布局。
Viewport：视口设置。
@media：媒体查询，设置一些样式在某些条件下生效。媒体查询是响应式布局的基础。
@font-face，引入一个外部的字体文件，其中至少需要写src和font-family，src表示引入的文件的路径，font-family为这个字体起一个名字


@font-face{
src: url(cjs.ttf);
font-family: srpz;
}