1.水平居中的 margin：0 auto;关于这个，大家也不陌生做网页让其居中用的比较多, 这个是用于子元素上的，前提是不受float影响<style> *{ padding: 0; margin: 0; } .box{ width: 300px;
float、table、flex解决等分布局出现的问题及解决方案 解决出现的问题解决float出现的问题问题一：如果给子块加上间距的话则会导致一行不够分而导致有的块被挤掉问题二 用盒子模型做出来了边距后出现了第一个模块的左边距有空隙 解决table出现的问题问题 margin-left: -10px
旋转木马 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
直接上代码 div { width:0px; height:0px; border-top:0 solid red; border-right:300px solid transparent; border-bottom:300px solid blue; border-left:300px solid transparent; } 这样就生成一个上三角形，同理，调节其他边（宽度或者是否透明）可以
第七周总结 在本周的学习之中，我愈发的感觉前端的内容之广阔，知识量确实不少，但这些知识可以通过不同方式的应用实现各种各样的功能，就拿线面的一个花瓣来说。里面的东西确实不复杂，但实现的效果却是相当可观的 <style> body{ background-color: black; heigh
一、块级元素和行内元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块级元素和行内元素</title> <style type="text/css"> div { color: red; width: 300px; height: 300px
题目：设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应。 常见的布局方式: 浮动(float)布局、定位(Position)布局、弹性(flex)布局、表格(table)布局、网格(grid)布局、圣杯布局、双飞翼布局。 公共样式 首先把公共样式放在头部，代码如下： <head> <meta charse
<style> html, body, div { margin: 0; padding: 0 } .bigBox { position: relative; width: 300px; height: 300px; background-color: #
垂直居中 1. display:flex 通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="
1.固定到浏览器 效果 样式： .fixed-box{ position: fixed; top: 300px; /* 1.浏览器宽度的一半 */ right: 0px; /* 2.版心盒子宽度的一半 */ width: 30px; background: skyblue;
字体样式(font) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> <!-- font-family 字体 text-align 位置 font-size 大小 font-weight 粗细 color 颜色 px 像
小demo 旋转木马 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>翻转导航</title> <style> body { /*添加透视*/ perspective: 1000px;
前端学习：学习笔记（CSS部分） CSS的学习总结(图解） CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> &l
CSS垂直居中的方法 1.通过flex布局实现 1 <div id="out"> 2 <div id="in"></div> 3 </div> 1 #out { 2 width: 300px; 3 height: 300px; 4 background-color: aqua; 5 display: flex; 6 }
1.less * { margin: 0; padding: 0; #wrap { position: absolute; width: 600px; height: 600px; background: url(../img/my-logo-2.png) repeat; background-size: 50px; border: 1px solid #000000;
CSS行内块元素(内联元素) 一、典型代表 inputimg 二、特点： 在一行上显示可以设置宽高 <style type="text/css"> img{ width: 300px; /* 顶部对齐 */ vertical-align: top; } input{ width: 300px; height: 200px; background-color: blue; } </style> </he
====================================响应式布局 http://four.haser.top/Bootstrap==================================== Flex 流布局 概念： 一个网站能够兼容多种终端（PC、手机、平板、车机系统、电视、巨幕）， 而不是为每一个终端定制一个特定的版本。 响应式布局就是
相对于2D多了一个Z轴，垂直于屏幕 transform属性 transform:向元素应用2D或者3D转换，在3D效果下可结合translate平移,rotate()旋转，skew()扭曲，scale()缩放 transform-origin:被转换元素的中心位置,默认在中心 transform-style:开启3D模式的属性 flat:子元素不保留3D位置 prese
css 实现鼠标移入图片显示遮罩层 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .image-div { width: 300px; height: 300px; position: relative; } .imag
返回目录 DOM <body> <div class="box"> <div class="img"> 图片 </div> </div> </body> CSS <style> body { width: 100vw; height: 100vh; dis
加float 变成行内块——在一行，可宽高margin div为块元素，无法在一行共存；span设置的宽高无效； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
top、left为负——当前元素盖别人 bottom、right为负——后面元素盖过来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css之transition动画效果</tit
css3模拟三角效果 div{ /*用css边框可以模拟三角效果 1.宽度高度为0 2.4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为transparent 3.为了照顾兼容性，加上font-size:0; line-height:0;
------------恢复内容开始------------ 效果图如下 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
