前端开发技术css样式学习笔记分享
时间：2023-03-30 15:18:22
CSS
概述在前端开发中，前端是结构化的，html是文档结构，css是设置样式（美化页面），js是逻辑结构，重点是“选择器”和“框模型”发展历史CSS1.0CSS2.0：DIV（块）+CSS，分离HTML和CSS结构的思想，使网页简单，SEOCSS2.1：浮动，定位CSS3.0：圆角，阴影，（动画...浏览器兼容性~）快速入门1.定位内嵌关联：在标签内设置样式，在标签内写样式
内部关联和html在一个文件中，即在head中写入外部关联就是把css写成一个单独的文件
2.导入方式主要是外部关联方式。如何导入使用link关键字，使用improt在href中添加地址3.优先就近原则，谁最接近样式将生效---内联样式最接近的基本选择器1.标签选择器-标签名称2.类选择器--".Classname"3.idSelector--"#idname"4.优先级关系id选择器>类选择器>标签选择器高级选择器1.层级选择器可以根据层级选择样式html文档的个数设置后代选择器后代选择Adjacent/brotherselector--/adjacentsiblingselector:只选择一个，相邻（向下）/Universalselector2.伪类结构选择器概述：什么是伪类是有逻辑的，并不会直接指出变化在哪里，根据逻辑位置判断使用：label,class,id使用后：3.属性选择器--公共属性名=属性值（正则）=表示绝对相等*=表示包含^=表示开始于...$=表示结束于...id属性为a[]{}文字美化text-alignment–>text-align:centerfirstlineindentation–>text-indent:2emlineheight–>line-height:300px;underline–>text-decorationtext-decoration:underline/underline/text-decoration:line-through/middleline/text-decoration:overline/overline/text-decoration:none/超链接到下划线/图文中心线在一行img,span{vetical-align:middle}background:背景框模型边距--外边距：容器（元素）的边框与父容器的距离。巧妙使用外边框居中容器padding--Innermargin：边框到边框内圆的距离--Border：容器的Frame，参数border：thicknessstylecolorborder：1pxsolidred；borderstyle参数：none定义无边框隐藏与“none”相同。应用于表格时除外，hidden用于解决边界冲突。dotted定义虚线边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于border-width的值。groove定义3D凹槽边界。它的效果取决于边框颜色的值。ridge定义3D脊状边框。它的效果取决于边框颜色的值。inset定义3D插入边框。它的效果取决于边框颜色的值。outset定义3Doutset边框。它的效果取决于边框颜色的值。inherit指定边框样式应从父元素继承。盒子大小的计算：margin+border+padding+content，否则会出现错位——或者windows窗口中的slider会浮动1.标准文档流文档流是指元素排版和布局的过程。对，从上到下的流向排列。最后将表单从上到下分成几行，每行从左到右排列元素。标准文档流的两个层次：块级元素
\
\行级元素\2.dipaly参数块：块元素inlineinline-block是块元素，但它可以是内联的，并且没有一个在一行中消失示例：Titlediv块元素
span内联元素
