双木桑德斯-CSDN博客

原创静态网页_css&html_猫眼电影首页小练习

在写页面的时候，一定要注意先把总体的结构划分好，比如导航栏，主要内容区域，上下左右啥的。填充内容的时候，要注意细节。实在拿不准的尺寸可以在开发者工具栏手动调，再到代码上面改。

2024-06-28 16:19:06 123

原创 css_26_BFC

块格式化上下文（Block Formatting Context,BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

2024-06-28 15:39:25 267

screen：检测电子屏幕，包括：电脑屏幕、平板屏幕、手机屏幕等。max-device-width：检测设备屏幕的最大宽度。min-device-width：检测设备屏幕的最小宽度。orientation：检测视口的旋转方向（是否横屏）。device-width：检测设备屏幕的宽度。max-height：检测视口最大高度。min-height：检测视口最小高度。max-width：检测视口最大宽度。min-width：检测视口最小宽度。height：检测视口高度。width：检测视口宽度。

2024-06-28 15:32:34 159

原创 css_24_伸缩盒模型

1．给元素设置：display:flex 或 display:inline-flex，该元素就变为了伸缩容器。2. display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。3．一个元素可以同时是：伸缩容器、伸缩项目。1．仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。2．无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会"块状化"。

2024-06-28 15:19:51 558

原创 css_23_多列布局

设置列与列之间边框的风格，值与 border-style 一致。：同时指定列宽和列数，复合属性；值没有数量和顺序要求。：设置列与列之间边框的宽度，值是长度。:：设置列与列之间边框的颜色。：设置列边框，复合属性。值： none 、all。：设置列边距，值是长度。：指定列宽，值是长度。

2024-06-28 15:18:40 287

原创 css_22_过渡&动画

: 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数默认值为end。6.step-start：等同于 steps(1,start)7.step-end：等同于 steps(1,end)5.ease-in-out：慢→快→慢。1.ease：平滑动画﹣﹣默认值。4.ease-out：快→慢。2.linear：线性过渡。3.ease-in：慢→快。

2024-06-28 14:44:12 935

原创 css_21_css3文本属性

注意：要使得text-overflow属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space 为nowrap 值。默认值：text-shadow:none 表示没有阴影。

2024-06-28 14:13:40 469

原创 css_20_定位

给元素设置即可实现相对定位。可以使用 left、right、top 、 bottom 四个属性调整位置。定位的元素会盖在普通元素之上。都发生定位的两个元素，后写的元素会盖在先写的元素之上。left不能和right一起设置，top和bottom不能一起设置。

2024-06-28 10:57:06 762

原创 css_19_浮动

4．不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的margin和padding。2．不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。5．不会像行内块一样被当做文本处理（没有行内块的空白问题）。2．方案二：给父元素也设置浮动，带来其他影响。4．方案四：在所有浮动元素的最后面，添加一个。3．不会独占一行，可以与其他元素共用一行。1．方案一：给父元素指定高度。3．方案三：给父元素设置。，并给该块级元素设置。

2024-06-28 09:35:02 636

原创 css_18_盒子模型

CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。

2024-06-28 09:23:15 590

原创 css_17_背景属性&鼠标属性

以元素左上角，为坐标原点，设置图片左上角的位置。两个值，分别是x坐标和y坐标。只写一个值，会被当做。如果只写一个值，另一个方向的值取center。repeat：重复，铺满整个元素，默认值。垂直： top、center、bottom。默认背景颜色是 transparent。水平：left、center、right。repeat-x：只在水平方向重复。repeat-y：只在垂直方向重复。no-repeat：不重复。x坐标，y坐标取center。url（图片的地址）（设置背景重复方式）写两个值，用空格隔开。

2024-06-24 14:29:29 397

原创 css_16_表格相关属性

边框相关的属性，不仅仅是表格能用，也能用（边框宽度）（边框颜色）none默认值solid 实线dashed 虚线dotted 点线double 双实线没有数量、顺序的要求。

2024-06-24 13:58:35 641

原创 css_15_列表相关属性

upper - roman ：大写罗马字。none：不显示前面的标识（很常用！lower - roman：小写罗马字。lower - alpha ：小写字母。upper - alpha：大写字母。outside ：在 li 的外边。inside ：在 li 的里面。square：实心方块。decimal：数字。url （图片地址）

2024-06-21 22:36:36 302