学习html真是快乐

学习的前端的头疼小白 2022-03-14 08:49:45

css样式属性：
文本、字体：
color:字体颜色；
font-size:12px|2em;
text-indent:2em;文本缩进
font-weight:bold;
font-style:italic;
font-family:字体颜色；
自定义字体：
@font-face{
    src:url(字体路径);
    font-family:name;
    font-style:italic;
    font-size:12px;
    ...
}
text-decoration:none(区下划线)|underline(加下划线)|line-throw;
text-align:justify(两端对齐)|left(靠左对齐)|right(靠右对齐)|center(居中)；
text-overflow:cover|elipist;
text-shadow: x y blur color;文字阴影
letter-spacing:number;文字之间间距
white-space:no-wrap;文字不换行显示
.....
边框：
border:
border-left|right|top|bottom:
border-image:九宫格切片
border-radius:25px|50%；边框倒角
border-top-right-radius:;倒角单独操作（方向先上下后左右）
box-shadow:x y blur color;边框阴影

背景：
background:
background-color:
background-image:
background-repeat:repeat|no-repeat|repeat-x|repeat-y;
background-position:center;top left|right bottom| x y;
background-size:x y|cover|....;
background-origin:content-box|border-box;
渐变：
background-image:linear-gradient(线性渐变：向下/向上/向左/向右/对角方向)|radial-gradient(径向渐变：由它们的中心定义)
精灵图：
通用类：
width:
height:
line-height:行间距；使用场景：批量的文本和文字之间的间隔；
盒子模型：
margin: 外边距是在容器边框外围填充的间隙；视觉效果：元素发生位移/偏移
bug：外边距合并（y轴方面的问题）
内联元素只能够支持x轴的外边距调整；
padding: 内间距是元素实际可用区域和边框之间填充的间隙；视觉效果：元素不会发生位移，但是元素会被撑大
box-sizing:border-box;(怪异的盒模型占位)

浮动：
float:none(不浮)|right(右浮)|left(左浮);
使用场景：元素横向排列（横向布局/多容器横向布局）时使用浮动（pc网页）
特点：
1、脱离文档流（不占位会覆盖元素）/absolute绝对定位也一样
2、子元素父元素高度塌陷
3、图片浮动文字会环绕图片

清除浮动：
1、clear:both;zoom:1(加挡板)
2、overflow:hidden;zoom:1(元素超出隐藏)
3、万能清除：
::after{
    content:"";
    height:0;
    display:block|table;
    clear:both;
    zoom:1;
}
定位：
position:static|relative(相对定位)|absolute(绝对定位)|fixed(固定定位);
relative:占用标准文档流，基于自身当前所处位置进行定位；一般多用于给绝对定位元素做定位基准；

absolute：脱离文档流，定位基准默认浏览器左上角，当给父、祖先元素增加相对定位定位基准就会改变为父、祖先当前位置；
给页面上不占位的子模块做排版（悬浮效果）

fixed：脱离文档流，定位基准默认在浏览器窗口；
left:
top:
right:
bottom:
z-index:1;(堆叠次序/默认都是0)

下拉菜单
二级分类
固定导航
楼层导航
轮播图（改变透明度的淡入淡出轮播...）

@media媒体查询
作用: 动态捕获屏幕的分辨率
使用场景：响应式布局（pc+pad+phone）
各类屏幕设备的分辨率：
手机设备：设备宽度width<=767px(超小型屏幕设备)
平板设备：设备宽度width>=768px <=991px(小型屏幕设备)
普通pc设备：设备宽度width>=992px <=1199px(中型屏幕设备)
大pc设备：设备宽度width>1200px(大型屏幕设备)

语法：
@media mediatype and(express) and (express){
css样式
}

mediatype:媒体设备类型
屏幕 screen
打印机 print
阅读设备 speech

express：条件
max-width:最大宽度；max-width:767px; <=767px
min-width:最小宽度；min-width:768px; >=768px

基于屏幕的分辨率引入css：
<link rel="stylesheet" href="" media="mediatype and (express) and (express)"/>

...全文