HTML和CSS
关注
分享
扫一扫
文章平均质量分 72
CSS
南初️
这个作者很懒，什么都没留下…
展开
-
HTML基础知识
标签介绍<!DOCTYPE html> 网页类型的声明<html lang="en"> lang="en" 网页的语言类型，通常有en,ch<head> <meta charset="UTF-8"> 浏览器的编码格式（网页上所有的编码格式都是UTF-8，若是没有设置编码格式，会出现乱码的情况 <title></title> 网页的标题标签位置</head><body>原创 2020-10-21 20:00:29 · 189 阅读 · 2 评论 -
元素水平垂直居中的几种方法
目录一、水平居中1.行内元素水平居中（1）父元素是块级元素（2）父元素不是块级元素2.块级元素水平居中（1）已知块级元素的宽度和高度（2）未知块级元素的宽度和高度（3）使用定位属性（父相子绝）（4）使用flexbox布局实现（宽度确不确定都可以）二、垂直居中1.单行的行内元素垂直居中2.多行的行内元素垂直居中3.块级元素垂直居中(1)使用定位属性（父相子绝）(2)使用flexbox布局实现（宽度确不确定都可以）三、块级元素水平+垂直居中1.原创 2020-11-08 17:04:36 · 2811 阅读 · 3 评论 -
导航的制作
目录一、导航二、简单导航一、导航<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } /*方案一：转化为行.原创 2020-11-04 11:40:37 · 515 阅读 · 3 评论 -
css的兼容性问题
目录一、为什么会出现css的兼容性问题二、如何解决css的兼容性问题1、双倍浮动BUG2、表单元素行高不一致3、IE6（默认16px为最小）不识别较小高度的标签（一般为10px）4、图片添加超链接时，在IE浏览器中会有蓝色的边框5、最小高度min-height不兼容IE66、图片默认有间隙7、按钮默认大小不一8、百分比BUG9、鼠标指针BUG10、透明度设置，IE不识别opacity属性11、上下margin重叠问题12、给子元素设置margin-t.原创 2020-11-03 22:43:00 · 2467 阅读 · 2 评论 -
网页布局（layout布局）
1.块元素转化为行级块之后，元素之间默认大概有5px的间距。解决办法：给父元素设置字体大小为0，然后再给自身设置字体大小2.设置浮动：父元素会撑不开背景色渐变：linear-gradient第一个参数：角度改变光标形状：cursor: pointer;...原创 2020-11-03 19:30:40 · 3056 阅读 · 2 评论 -
图片的模糊样式以及图像拼合技术（雪碧图）
一、模糊样式：filter二、图像拼合技术（雪碧图）例如下面这张图片：span{ display: inline-block; width: 36px; height: 40px; background: url("./image/bg.png"); /*border: 1px solid red;*/ }.s1{ background-position: 0px -192px; }.s2{ background-position:.原创 2020-10-28 14:20:06 · 316 阅读 · 2 评论 -
css元素的浮动、定位
一、元素浮动1.float属性float：左浮动或者右浮动元素浮动之后，不会影响前面的元素，会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，但是会导致后边元素的重排。 浮动元素会脱离正常文档流，即浮动元素不占位置。.box{ width: 100px; height: 100px; background-color: sienna; border: 1px solid red; float: left; }<p>我是前.原创 2020-10-28 12:51:05 · 851 阅读 · 1 评论 -
display属性
目录一、css的display属性相互转化的问题1.块元素转化为行元素2.块元素转化为行级块3.块元素转化为行级元素二、元素的显示与隐藏（display属性和visibility属性）1.display属性2.visibility属性三、display：table四、display：list-item属性值一、css的display属性相互转化的问题1.块元素转化为行元素 display: block; --------->>>&.原创 2020-10-27 20:30:23 · 879 阅读 · 1 评论 -
盒子模型塌陷解决办法
一、盒子模型塌陷当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。 例如这种情况：<style> *{ margin: 0; padding: 0; } .box{ width: 100px; height: 100px; background-color: tomato; } ..原创 2020-10-27 17:43:19 · 2278 阅读 · 1 评论 -
css基础知识
一、网页的几种表现形式视图层（html层）表现层（css层）行为层（js）二、表现层（css ：层叠样式表）css作用： 对html元素的位置和精确计算像素，外观，字体等等，css特点：<1>丰富的样式定义<2>易于使用和修改<3>多页面使用<4>可层叠（一个元素可具有多个css样式）<5>页面压缩 （尽量多次复用同样的css，减小css文件体积，提高网页 性能）3. css样式属性写法： 属.原创 2020-10-22 20:06:44 · 2713 阅读 · 1 评论